webpacker 5.4.4 → 6.0.0.rc.6

data/package/babel/preset.js

@@ -0,0 +1,54 @@
+const { moduleExists } = require('@rails/webpacker')
+
+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']
+        }
+      ],
+      moduleExists('@babel/preset-typescript') && [
+        '@babel/preset-typescript',
+        { allExtensions: true, isTSX: true }
+      ],
+      moduleExists('@babel/preset-react') && [
+        '@babel/preset-react',
+        {
+          development: isDevelopmentEnv || isTestEnv,
+          useBuiltIns: true
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      ['@babel/plugin-proposal-class-properties', { loose: true }],
+      ['@babel/plugin-transform-runtime', { helpers: false }],
+      isProductionEnv &&
+        moduleExists('babel-plugin-transform-react-remove-prop-types') && [
+          'babel-plugin-transform-react-remove-prop-types',
+          { removeImport: true }
+        ]
+    ].filter(Boolean)
+  }
+}

data/package/config.js

@@ -1,32 +1,24 @@
 const { resolve } = require('path')
-const { safeLoad } = require('js-yaml')
+const { load } = 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')
 
 const defaultConfigPath = require.resolve('../lib/install/config/webpacker.yml')
 
 const getDefaultConfig = () => {
-  const defaultConfig = safeLoad(readFileSync(defaultConfigPath), 'utf8')
+  const defaultConfig = load(readFileSync(defaultConfigPath), 'utf8')
   return defaultConfig[railsEnv] || defaultConfig.production
 }
 
 const defaults = getDefaultConfig()
-const app = safeLoad(readFileSync(configPath), 'utf8')[railsEnv]
+const app = load(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

@@ -1,4 +1,4 @@
-const { safeLoad } = require('js-yaml')
+const { load } = require('js-yaml')
 const { readFileSync } = require('fs')
 
 const NODE_ENVIRONMENTS = ['development', 'production', 'test']
@@ -6,13 +6,22 @@ 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 config = load(readFileSync(configPath), 'utf8')
 const availableEnvironments = Object.keys(config).join('|')
 const regex = new RegExp(`^(${availableEnvironments})$`, 'g')
 
+const runningWebpackDevServer = process.env.WEBPACK_SERVE === 'true'
+
 module.exports = {
   railsEnv: railsEnv && railsEnv.match(regex) ? railsEnv : DEFAULT,
-  nodeEnv: nodeEnv && NODE_ENVIRONMENTS.includes(nodeEnv) ? nodeEnv : DEFAULT
+  nodeEnv,
+  isProduction,
+  isDevelopment,
+  runningWebpackDevServer
 }

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(
-        resolve('app', 'javascript', 'packs', 'application.js')
+      expect(baseConfig.entry.application).toEqual(
+        resolve('app', 'packs', 'entrypoints', 'application.js')
       )
     })
 
     test('should return multi file entry points', () => {
-      const config = environment.toWebpackConfig()
-      expect(config.entry.multi_entry.sort()).toEqual([
-        resolve('app', 'javascript', 'packs', 'multi_entry.css'),
-        resolve('app', 'javascript', 'packs', 'multi_entry.js')
+      expect(baseConfig.entry.multi_entry.sort()).toEqual([
+        resolve('app', 'packs', 'entrypoints', 'multi_entry.css'),
+        resolve('app', 'packs', 'entrypoints', '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(
-        'js/[name]-[contenthash].chunk.js'
+      expect(baseConfig.output.filename).toEqual('js/[name].js')
+      expect(baseConfig.output.chunkFilename).toEqual(
+        'js/[name].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(2)
     })
 
     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([
-        resolve('app', 'javascript'),
+      expect(baseConfig.resolve.modules).toEqual([
+        resolve('app', 'packs'),
         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: globSync } = require('glob')
+const WebpackAssetsManifest = require('webpack-assets-manifest')
+const webpack = require('webpack')
 const rules = require('../rules')
+const { isProduction } = require('../env')
 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 { moduleExists } = require('../utils/helpers')
 
 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) => {
+
+  globSync(`${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),
+    new WebpackAssetsManifest({
+      entrypoints: true,
+      writeToDisk: true,
+      output: 'manifest.json',
+      entrypointsUseAssets: true,
+      publicPath: true
+    })
+  ]
+
+  if (moduleExists('css-loader') && moduleExists('mini-css-extract-plugin')) {
+    const hash = isProduction ? '-[contenthash:8]' : ''
+    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+    plugins.push(
+      new MiniCssExtractPlugin({
+        filename: `css/[name]${hash}.css`,
+        chunkFilename: `css/[id]${hash}.css`
+      })
+    )
+  }
+
+  return plugins
+}
+
+// Don't use contentHash except for production for performance
+// https://webpack.js.org/guides/build-performance/#avoid-production-specific-tooling
+const hash = isProduction ? '-[contenthash]' : ''
+module.exports = {
   mode: 'production',
   output: {
-    filename: 'js/[name]-[contenthash].js',
-    chunkFilename: 'js/[name]-[contenthash].chunk.js',
-    hotUpdateChunkFilename: 'js/[id]-[hash].hot-update.js',
+    filename: `js/[name]${hash}.js`,
+    chunkFilename: `js/[name]${hash}.chunk.js`,
+
+    // https://webpack.js.org/configuration/output/#outputhotupdatechunkfilename
+    hotUpdateChunkFilename: 'js/[id].[fullhash].hot-update.js',
     path: config.outputPath,
     publicPath: config.publicPath
   },
-
+  entry: getEntryObject(),
   resolve: {
-    extensions: config.extensions,
+    extensions: ['.js', '.jsx', '.mjs', '.ts', '.tsx', '.coffee'],
+    modules: getModulePaths(),
     plugins: [PnpWebpackPlugin]
   },
 
+  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: 'single'
+  },
 
-      resolve: {
-        modules: this.resolvedModules.values()
-      }
-    })
+  module: {
+    strictExportPresence: true,
+    rules
   }
 }

data/package/environments/development.js

@@ -1,53 +1,55 @@
-const webpack = require('webpack')
-const Base = require('./base')
+const { merge } = require('webpack-merge')
+
+const baseConfig = require('./base')
 const devServer = require('../dev_server')
+const { runningWebpackDevServer } = require('../env')
+
 const { outputPath: contentBase, publicPath } = require('../config')
 
-module.exports = class extends Base {
-  constructor() {
-    super()
-
-    this.config.merge({
-      mode: 'development',
-      devtool: 'cheap-module-source-map'
-    })
-
-    if (process.env.WEBPACK_DEV_SERVER
-        && process.env.WEBPACK_DEV_SERVER !== 'undefined') {
-      if (devServer.hmr) {
-        this.plugins.append('HotModuleReplacement', new webpack.HotModuleReplacementPlugin())
-        this.config.output.filename = '[name]-[hash].js'
-      }
-
-      this.config.merge({
-        devServer: {
-          clientLogLevel: 'none',
-          compress: devServer.compress,
-          quiet: devServer.quiet,
-          disableHostCheck: devServer.disable_host_check,
-          host: devServer.host,
-          port: devServer.port,
-          https: devServer.https,
-          hot: devServer.hmr,
-          contentBase,
-          inline: devServer.inline,
-          useLocalIp: devServer.use_local_ip,
-          public: devServer.public,
-          publicPath,
-          historyApiFallback: {
-            disableDotRule: true
-          },
-          headers: devServer.headers,
-          overlay: devServer.overlay,
-          stats: {
-            entrypoints: false,
-            errorDetails: true,
-            modules: false,
-            moduleTrace: false
-          },
-          watchOptions: devServer.watch_options
-        }
-      })
+let devConfig = {
+  mode: 'development',
+  devtool: 'cheap-module-source-map'
+}
+
+if (runningWebpackDevServer) {
+  const liveReload = devServer.live_reload !== undefined ? devServer.live_reload : !devServer.hmr
+
+  const devServerConfig = {
+    devMiddleware: {
+      publicPath
+    },
+    compress: devServer.compress,
+    allowedHosts: devServer.allowed_hosts,
+    host: devServer.host,
+    port: devServer.port,
+    https: devServer.https,
+    hot: devServer.hmr,
+    liveReload,
+    historyApiFallback: { disableDotRule: true },
+    headers: devServer.headers,
+    static: {
+      publicPath: contentBase
     }
   }
+
+  if (devServer.static) {
+    devServerConfig.static = { ...devServerConfig.static, ...devServer.static }
+  }
+
+  if (devServer.client) {
+    devServerConfig.client = devServer.client
+  }
+
+  devConfig = merge(devConfig, {
+    stats: {
+      colors: true,
+      entrypoints: false,
+      errorDetails: true,
+      modules: false,
+      moduleTrace: false
+    },
+    devServer: devServerConfig
+  })
 }
+
+module.exports = merge(baseConfig, devConfig)