webpacker 5.2.1 → 6.0.0.pre.1

data/package/__tests__/test.js

@@ -15,12 +15,11 @@ describe('Test environment', () => {
       process.env.RAILS_ENV = 'test'
       process.env.NODE_ENV = 'test'
 
-      const { environment } = require('../index')
-      const config = environment.toWebpackConfig()
+      const { webpackConfig } = require('../index')
 
-      expect(config.output.path).toEqual(resolve('public', 'packs-test'))
-      expect(config.output.publicPath).toEqual('/packs-test/')
-      expect(config.devServer).toEqual(undefined)
+      expect(webpackConfig.output.path).toEqual(resolve('public', 'packs-test'))
+      expect(webpackConfig.output.publicPath).toEqual('/packs-test/')
+      expect(webpackConfig.devServer).toEqual(undefined)
     })
   })
 })

data/package/babel/preset-react.js

@@ -0,0 +1,62 @@
+module.exports = function config(api) {
+  const validEnv = ['development', 'test', 'production']
+  const currentEnv = api.env()
+  const isDevelopmentEnv = api.env('development')
+  const isProductionEnv = api.env('production')
+  const isTestEnv = api.env('test')
+
+  if (!validEnv.includes(currentEnv)) {
+    throw new Error(
+      `Please specify a valid NODE_ENV or BABEL_ENV environment variable. Valid values are "development", "test", and "production". Instead, received: "${JSON.stringify(currentEnv)}".`
+    )
+  }
+
+  return {
+    presets: [
+      isTestEnv && [
+        '@babel/preset-env',
+        {
+          targets: { node: 'current' },
+          modules: 'commonjs'
+        }
+      ],
+      (isProductionEnv || isDevelopmentEnv) && [
+        '@babel/preset-env',
+        {
+          useBuiltIns: 'entry',
+          corejs: '3.8',
+          modules: false,
+          bugfixes: true,
+          loose: true,
+          exclude: ['transform-typeof-symbol']
+        }
+      ],
+      [
+        '@babel/preset-react',
+        {
+          development: isDevelopmentEnv || isTestEnv,
+          useBuiltIns: true
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      'babel-plugin-macros',
+      [
+        '@babel/plugin-proposal-class-properties',
+        { loose: true }
+      ],
+      [
+        '@babel/plugin-transform-runtime',
+        {
+          helpers: false,
+          regenerator: true,
+          corejs: false
+        }
+      ],
+      isProductionEnv && [
+        'babel-plugin-transform-react-remove-prop-types',
+        { removeImport: true }
+      ]
+    ].filter(Boolean)
+  }
+}

data/package/babel/preset.js

@@ -0,0 +1,44 @@
+module.exports = function config(api) {
+  const validEnv = ['development', 'test', 'production']
+  const currentEnv = api.env()
+  const isDevelopmentEnv = api.env('development')
+  const isProductionEnv = api.env('production')
+  const isTestEnv = api.env('test')
+
+  if (!validEnv.includes(currentEnv)) {
+    throw new Error(
+      `Please specify a valid NODE_ENV or BABEL_ENV environment variable. Valid values are "development", "test", and "production". Instead, received: "${JSON.stringify(currentEnv)}".`
+    )
+  }
+
+  return {
+    presets: [
+      isTestEnv && [
+        '@babel/preset-env',
+        { targets: { node: 'current' } }
+      ],
+      (isProductionEnv || isDevelopmentEnv) && [
+        '@babel/preset-env',
+        {
+          useBuiltIns: 'entry',
+          corejs: '3.8',
+          modules: 'auto',
+          bugfixes: true,
+          loose: true,
+          exclude: ['transform-typeof-symbol']
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      'babel-plugin-macros',
+      [
+        '@babel/plugin-proposal-class-properties',
+        { loose: true }
+      ],
+      [
+        '@babel/plugin-transform-runtime',
+        { helpers: false }
+      ]
+    ].filter(Boolean)
+  }
+}

data/package/config.js

@@ -1,8 +1,8 @@
 const { resolve } = require('path')
 const { safeLoad } = require('js-yaml')
 const { readFileSync } = require('fs')
-const deepMerge = require('./utils/deep_merge')
-const { isArray, ensureTrailingSlash } = require('./utils/helpers')
+const { merge } = require('webpack-merge')
+const { ensureTrailingSlash } = require('./utils/helpers')
 const { railsEnv } = require('./env')
 const configPath = require('./configPath')
 
@@ -16,17 +16,9 @@ const getDefaultConfig = () => {
 const defaults = getDefaultConfig()
 const app = safeLoad(readFileSync(configPath), 'utf8')[railsEnv]
 
-if (isArray(app.extensions) && app.extensions.length) delete defaults.extensions
-if (isArray(app.static_assets_extensions) && app.static_assets_extensions.length) {
-  delete defaults.static_assets_extensions
-}
-
-const config = deepMerge(defaults, app)
+const config = merge(defaults, app)
 config.outputPath = resolve(config.public_root_path, config.public_output_path)
 
-// Merge resolved_paths into additional_paths for backwards-compat
-config.additional_paths = config.additional_paths.concat(config.resolved_paths || [])
-
 // Ensure that the publicPath includes our asset host so dynamic imports
 // (code-splitting chunks and static assets) load from the CDN instead of a relative path.
 const getPublicPath = () => {

data/package/env.js

@@ -6,7 +6,11 @@ const DEFAULT = 'production'
 const configPath = require('./configPath')
 
 const railsEnv = process.env.RAILS_ENV
-const nodeEnv = process.env.NODE_ENV
+const rawNodeEnv = process.env.NODE_ENV
+const nodeEnv
+  = rawNodeEnv && NODE_ENVIRONMENTS.includes(rawNodeEnv) ? rawNodeEnv : DEFAULT
+const isProduction = nodeEnv === 'production'
+const isDevelopment = nodeEnv === 'development'
 
 const config = safeLoad(readFileSync(configPath), 'utf8')
 const availableEnvironments = Object.keys(config).join('|')
@@ -14,5 +18,7 @@ const regex = new RegExp(`^(${availableEnvironments})$`, 'g')
 
 module.exports = {
   railsEnv: railsEnv && railsEnv.match(regex) ? railsEnv : DEFAULT,
-  nodeEnv: nodeEnv && NODE_ENVIRONMENTS.includes(nodeEnv) ? nodeEnv : DEFAULT
+  nodeEnv,
+  isProduction,
+  isDevelopment
 }

data/package/environments/__tests__/base.js

@@ -9,93 +9,61 @@ chdirTestApp()
 
 const { resolve } = require('path')
 const rules = require('../../rules')
-const { ConfigList } = require('../../config_types')
-const Environment = require('../base')
+const baseConfig = require('../base')
 
-describe('Environment', () => {
+describe('Base config', () => {
   afterAll(chdirCwd)
 
-  let environment
-
-  describe('toWebpackConfig', () => {
-    beforeEach(() => {
-      environment = new Environment()
-    })
-
+  describe('config', () => {
     test('should return entry', () => {
-      const config = environment.toWebpackConfig()
-      expect(config.entry.application).toEqual(
+      expect(baseConfig.entry.application).toEqual(
         resolve('app', 'javascript', 'packs', 'application.js')
       )
     })
 
     test('should return multi file entry points', () => {
-      const config = environment.toWebpackConfig()
-      expect(config.entry.multi_entry.sort()).toEqual([
+      expect(baseConfig.entry.multi_entry.sort()).toEqual([
         resolve('app', 'javascript', 'packs', 'multi_entry.css'),
         resolve('app', 'javascript', 'packs', 'multi_entry.js')
       ])
     })
 
     test('should return output', () => {
-      const config = environment.toWebpackConfig()
-      expect(config.output.filename).toEqual('js/[name]-[contenthash].js')
-      expect(config.output.chunkFilename).toEqual(
+      expect(baseConfig.output.filename).toEqual('js/[name]-[contenthash].js')
+      expect(baseConfig.output.chunkFilename).toEqual(
         'js/[name]-[contenthash].chunk.js'
       )
     })
 
     test('should return default loader rules for each file in config/loaders', () => {
-      const config = environment.toWebpackConfig()
       const defaultRules = Object.keys(rules)
-      const configRules = config.module.rules
-
-      expect(defaultRules.length).toEqual(7)
-      expect(configRules.length).toEqual(7)
-    })
-
-    test('should return cache path for nodeModules rule', () => {
-      const nodeModulesLoader = rules.nodeModules.use.find(
-        (rule) => rule.loader === 'babel-loader'
-      )
-
-      expect(nodeModulesLoader.options.cacheDirectory).toBeTruthy()
-    })
+      const configRules = baseConfig.module.rules
 
-    test('should return cache path for babel-loader rule', () => {
-      const babelLoader = rules.babel.use.find(
-        (rule) => rule.loader === 'babel-loader'
-      )
-
-      expect(babelLoader.options.cacheDirectory).toBeTruthy()
+      expect(defaultRules.length).toEqual(3)
+      expect(configRules.length).toEqual(3)
     })
 
     test('should return default plugins', () => {
-      const config = environment.toWebpackConfig()
-      expect(config.plugins.length).toEqual(4)
+      expect(baseConfig.plugins.length).toEqual(4)
     })
 
     test('should return default resolveLoader', () => {
-      const config = environment.toWebpackConfig()
-      expect(config.resolveLoader.modules).toEqual(['node_modules'])
+      expect(baseConfig.resolveLoader.modules).toEqual(['node_modules'])
     })
 
     test('should return default resolve.modules with additions', () => {
-      const config = environment.toWebpackConfig()
-      expect(config.resolve.modules).toEqual([
+      expect(baseConfig.resolve.modules).toEqual([
         resolve('app', 'javascript'),
         resolve('app/assets'),
         resolve('/etc/yarn'),
+        resolve('some.config.js'),
         resolve('app/elm'),
         'node_modules'
       ])
     })
 
     test('returns plugins property as Array', () => {
-      const config = environment.toWebpackConfig()
-
-      expect(config.plugins).toBeInstanceOf(Array)
-      expect(config.plugins).not.toBeInstanceOf(ConfigList)
+      expect(baseConfig.plugins).toBeInstanceOf(Array)
     })
   })
 })

data/package/environments/base.js

@@ -1,176 +1,116 @@
 /* eslint global-require: 0 */
 /* eslint import/no-dynamic-require: 0 */
 
-const {
-  basename, dirname, join, relative, resolve
-} = require('path')
-const { sync } = require('glob')
+const { basename, dirname, join, relative, resolve } = require('path')
 const extname = require('path-complete-extname')
-
-const webpack = require('webpack')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const WebpackAssetsManifest = require('webpack-assets-manifest')
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
 const PnpWebpackPlugin = require('pnp-webpack-plugin')
-
-const { isNotObject, prettyPrint } = require('../utils/helpers')
-const deepMerge = require('../utils/deep_merge')
-
-const { ConfigList, ConfigObject } = require('../config_types')
+const { sync } = require('glob')
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
+const WebpackAssetsManifest = require('webpack-assets-manifest')
+const webpack = require('webpack')
 const rules = require('../rules')
 const config = require('../config')
-
-const getLoaderList = () => {
-  const result = new ConfigList()
-  Object.keys(rules).forEach((key) => result.append(key, rules[key]))
-  return result
-}
-
-const getPluginList = () => {
-  const result = new ConfigList()
-  result.append(
-    'Environment',
-    new webpack.EnvironmentPlugin(process.env)
-  )
-  result.append('CaseSensitivePaths', new CaseSensitivePathsPlugin())
-  result.append(
-    'MiniCssExtract',
-    new MiniCssExtractPlugin({
-      filename: 'css/[name]-[contenthash:8].css',
-      chunkFilename: 'css/[name]-[contenthash:8].chunk.css'
-    })
-  )
-  result.append(
-    'Manifest',
-    new WebpackAssetsManifest({
-      entrypoints: true,
-      writeToDisk: true,
-      publicPath: config.publicPathWithoutCDN
-    })
-  )
-  return result
-}
-
-const getExtensionsGlob = () => {
-  const { extensions } = config
-  return extensions.length === 1 ? `**/*${extensions[0]}` : `**/*{${extensions.join(',')}}`
-}
+const { isDevelopment } = require('../env')
 
 const getEntryObject = () => {
-  const result = new ConfigObject()
-  const glob = getExtensionsGlob()
+  const entries = {}
   const rootPath = join(config.source_path, config.source_entry_path)
-  const paths = sync(join(rootPath, glob))
-  paths.forEach((path) => {
+
+  sync(`${rootPath}/**/*.*`).forEach((path) => {
     const namespace = relative(join(rootPath), dirname(path))
     const name = join(namespace, basename(path, extname(path)))
     let assetPaths = resolve(path)
 
     // Allows for multiple filetypes per entry (https://webpack.js.org/guides/entry-advanced/)
     // Transforms the config object value to an array with all values under the same name
-    let previousPaths = result.get(name)
+    let previousPaths = entries[name]
     if (previousPaths) {
-      previousPaths = Array.isArray(previousPaths) ? previousPaths : [previousPaths]
+      previousPaths = Array.isArray(previousPaths)
+        ? previousPaths
+        : [previousPaths]
       previousPaths.push(assetPaths)
       assetPaths = previousPaths
     }
 
-    result.set(name, assetPaths)
+    entries[name] = assetPaths
   })
-  return result
+
+  return entries
 }
 
 const getModulePaths = () => {
-  const result = new ConfigList()
-  result.append('source', resolve(config.source_path))
+  const result = [resolve(config.source_path)]
+
   if (config.additional_paths) {
-    config.additional_paths.forEach((path) => result.append(path, resolve(path)))
+    config.additional_paths.forEach((path) => result.push(resolve(path)))
   }
-  result.append('node_modules', 'node_modules')
+  result.push('node_modules')
+
   return result
 }
 
-const getBaseConfig = () => new ConfigObject({
+const getPlugins = () => {
+  const plugins = [
+    new webpack.EnvironmentPlugin(process.env),
+    PnpWebpackPlugin,
+    new CaseSensitivePathsPlugin(),
+    new WebpackAssetsManifest({
+      entrypoints: true,
+      writeToDisk: true,
+      output: 'manifest.json',
+      entrypointsUseAssets: true,
+      publicPath: true
+    })
+  ]
+
+  try {
+    if (require.resolve('css-loader')) {
+      const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+      plugins.push(
+        new MiniCssExtractPlugin({
+          filename: isDevelopment ? '[name].css' : '[name].[contenthash:8].css',
+          chunkFilename: isDevelopment ? '[id].css' : '[id].[contenthash:8].css'
+        })
+      )
+    }
+  } catch (e) {
+    /* Work out what to print here */
+  }
+
+  return plugins
+}
+
+module.exports = {
   mode: 'production',
   output: {
     filename: 'js/[name]-[contenthash].js',
     chunkFilename: 'js/[name]-[contenthash].chunk.js',
     hotUpdateChunkFilename: 'js/[id]-[hash].hot-update.js',
+    assetModuleFilename: 'static/[hash][ext][query]',
     path: config.outputPath,
     publicPath: config.publicPath
   },
-
+  entry: getEntryObject(),
   resolve: {
-    extensions: config.extensions,
-    plugins: [PnpWebpackPlugin]
+    extensions: ['.js', '.mjs', '.ts'],
+    modules: getModulePaths()
   },
 
+  plugins: getPlugins(),
+
   resolveLoader: {
     modules: ['node_modules'],
     plugins: [PnpWebpackPlugin.moduleLoader(module)]
   },
 
-  node: {
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty'
-  }
-})
-
-module.exports = class Base {
-  constructor() {
-    this.loaders = getLoaderList()
-    this.plugins = getPluginList()
-    this.config = getBaseConfig()
-    this.entry = getEntryObject()
-    this.resolvedModules = getModulePaths()
-  }
-
-  splitChunks(callback = null) {
-    let appConfig = {}
-    const defaultConfig = {
-      optimization: {
-        // Split vendor and common chunks
-        // https://twitter.com/wSokra/status/969633336732905474
-        splitChunks: {
-          chunks: 'all',
-          name: true
-        },
-        // Separate runtime chunk to enable long term caching
-        // https://twitter.com/wSokra/status/969679223278505985
-        runtimeChunk: true
-      }
-    }
-
-    if (callback) {
-      appConfig = callback(defaultConfig)
-      if (isNotObject(appConfig)) {
-        throw new Error(`
-          ${prettyPrint(appConfig)} is not a valid splitChunks configuration.
-          See https://webpack.js.org/plugins/split-chunks-plugin/#configuration
-        `)
-      }
-    }
+  optimization: {
+    splitChunks: { chunks: 'all' },
 
-    return this.config.merge(deepMerge(defaultConfig, appConfig))
-  }
-
-  toWebpackConfig() {
-    return this.config.merge({
-      entry: this.entry.toObject(),
-
-      module: {
-        strictExportPresence: true,
-        rules: this.loaders.values()
-      },
-
-      plugins: this.plugins.values(),
+    runtimeChunk: { name: (entrypoint) => `runtime-${entrypoint.name}` }
+  },
 
-      resolve: {
-        modules: this.resolvedModules.values()
-      }
-    })
+  module: {
+    strictExportPresence: true,
+    rules
   }
 }