webpacker 3.6.0 → 4.0.2

data/package/__tests__/test.js

@@ -17,9 +17,10 @@ describe('Test environment', () => {
 
       const { environment } = require('../index')
       const config = environment.toWebpackConfig()
-      
+
       expect(config.output.path).toEqual(resolve('public', 'packs-test'))
       expect(config.output.publicPath).toEqual('/packs-test/')
+      expect(config.devServer).toEqual(undefined)
     })
   })
 })

data/package/config.js

@@ -2,7 +2,7 @@ const { resolve } = require('path')
 const { safeLoad } = require('js-yaml')
 const { readFileSync } = require('fs')
 const deepMerge = require('./utils/deep_merge')
-const { isArray } = require('./utils/helpers')
+const { isArray, ensureTrailingSlash } = require('./utils/helpers')
 const { railsEnv } = require('./env')
 
 const defaultConfigPath = require.resolve('../lib/install/config/webpacker.yml')
@@ -17,17 +17,29 @@ 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)
-config.outputPath = resolve('public', config.public_output_path)
-
-let publicPath = `/${config.public_output_path}/`
-// Add prefix to publicPath.
-if (process.env.RAILS_RELATIVE_URL_ROOT) {
-  publicPath = `/${process.env.RAILS_RELATIVE_URL_ROOT}${publicPath}`
+config.outputPath = resolve(config.public_root_path, config.public_output_path)
+
+// 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 = () => {
+  const rootUrl = process.env.WEBPACKER_ASSET_HOST || '/'
+  let packPath = `${config.public_output_path}/`
+  // Add relative root prefix to pack path.
+  if (process.env.RAILS_RELATIVE_URL_ROOT) {
+    let relativeRoot = process.env.RAILS_RELATIVE_URL_ROOT
+    relativeRoot = relativeRoot.startsWith('/') ? relativeRoot.substr(1) : relativeRoot
+    packPath = `${ensureTrailingSlash(relativeRoot)}${packPath}`
+  }
+
+  return ensureTrailingSlash(rootUrl) + packPath
 }
 
-// Remove extra slashes.
-config.publicPath = publicPath.replace(/(^\/|[^:]\/)\/+/g, '$1')
+config.publicPath = getPublicPath()
+config.publicPathWithoutCDN = `/${config.public_output_path}/`
 
 module.exports = config

data/package/config_types/config_list.js

@@ -38,12 +38,11 @@ class ConfigList extends Array {
   }
 
   getIndex(key, shouldThrow = false) {
-    const index = this.findIndex(entry =>
-      (
-        entry === key ||
-        entry.key === key ||
-        (entry.constructor && entry.constructor.name === key)
-      ))
+    const index = this.findIndex(entry => (
+      entry === key
+        || entry.key === key
+        || (entry.constructor && entry.constructor.name === key)
+    ))
 
     if (shouldThrow && index < 0) throw new Error(`Item ${key} not found`)
     return index

data/package/dev_server.js

@@ -9,8 +9,10 @@ const fetch = (key) => {
 const devServerConfig = config.dev_server
 
 if (devServerConfig) {
+  const envPrefix = config.dev_server.env_prefix || 'WEBPACKER_DEV_SERVER'
+
   Object.keys(devServerConfig).forEach((key) => {
-    const envValue = fetch(`WEBPACKER_DEV_SERVER_${key.toUpperCase().replace(/_/g, '')}`)
+    const envValue = fetch(`${envPrefix}_${key.toUpperCase().replace(/_/g, '')}`)
     if (envValue !== undefined) devServerConfig[key] = envValue
   })
 }

data/package/environments/__tests__/base.js

@@ -24,13 +24,15 @@ describe('Environment', () => {
 
     test('should return entry', () => {
       const config = environment.toWebpackConfig()
-      expect(config.entry.application).toEqual(resolve('app', 'javascript', 'packs', 'application.js'))
+      expect(config.entry.application).toEqual(
+        resolve('app', 'javascript', 'packs', 'application.js')
+      )
     })
 
     test('should return output', () => {
       const config = environment.toWebpackConfig()
-      expect(config.output.filename).toEqual('[name]-[chunkhash].js')
-      expect(config.output.chunkFilename).toEqual('[name]-[chunkhash].chunk.js')
+      expect(config.output.filename).toEqual('js/[name]-[chunkhash].js')
+      expect(config.output.chunkFilename).toEqual('js/[name]-[chunkhash].chunk.js')
     })
 
     test('should return default loader rules for each file in config/loaders', () => {
@@ -38,8 +40,8 @@ describe('Environment', () => {
       const defaultRules = Object.keys(rules)
       const configRules = config.module.rules
 
-      expect(defaultRules.length).toBeGreaterThan(1)
-      expect(configRules.length).toEqual(defaultRules.length)
+      expect(defaultRules.length).toEqual(7)
+      expect(configRules.length).toEqual(8)
     })
 
     test('should return default plugins', () => {

data/package/environments/base.js

@@ -8,9 +8,13 @@ const { sync } = require('glob')
 const extname = require('path-complete-extname')
 
 const webpack = require('webpack')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const ManifestPlugin = require('webpack-manifest-plugin')
+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 rules = require('../rules')
@@ -24,10 +28,27 @@ const getLoaderList = () => {
 
 const getPluginList = () => {
   const result = new ConfigList()
-  result.append('Environment', new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(process.env))))
+  result.append(
+    'Environment',
+    new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(process.env)))
+  )
   result.append('CaseSensitivePaths', new CaseSensitivePathsPlugin())
-  result.append('ExtractText', new ExtractTextPlugin('[name]-[contenthash].css'))
-  result.append('Manifest', new ManifestPlugin({ publicPath: config.publicPath, writeToFileEmit: true }))
+  result.append(
+    'MiniCssExtract',
+    new MiniCssExtractPlugin({
+      filename: 'css/[name]-[contenthash:8].css',
+      chunkFilename: 'css/[name]-[contenthash:8].chunk.css'
+    })
+  )
+  result.append(
+    'Manifest',
+    new WebpackAssetsManifest({
+      integrity: false,
+      entrypoints: true,
+      writeToDisk: true,
+      publicPath: config.publicPathWithoutCDN
+    })
+  )
   return result
 }
 
@@ -59,31 +80,34 @@ const getModulePaths = () => {
   return result
 }
 
-const getBaseConfig = () =>
-  new ConfigObject({
-    output: {
-      filename: '[name]-[chunkhash].js',
-      chunkFilename: '[name]-[chunkhash].chunk.js',
-      path: config.outputPath,
-      publicPath: config.publicPath
-    },
-
-    resolve: {
-      extensions: config.extensions
-    },
-
-    resolveLoader: {
-      modules: ['node_modules']
-    },
-
-    node: {
-      dgram: 'empty',
-      fs: 'empty',
-      net: 'empty',
-      tls: 'empty',
-      child_process: 'empty'
-    }
-  })
+const getBaseConfig = () => new ConfigObject({
+  mode: 'production',
+  output: {
+    filename: 'js/[name]-[chunkhash].js',
+    chunkFilename: 'js/[name]-[chunkhash].chunk.js',
+    hotUpdateChunkFilename: 'js/[id]-[hash].hot-update.js',
+    path: config.outputPath,
+    publicPath: config.publicPath
+  },
+
+  resolve: {
+    extensions: config.extensions,
+    plugins: [PnpWebpackPlugin]
+  },
+
+  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() {
@@ -94,13 +118,42 @@ module.exports = class Base {
     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: false
+        },
+        // 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
+        `)
+      }
+    }
+
+    return this.config.merge(deepMerge(defaultConfig, appConfig))
+  }
+
   toWebpackConfig() {
     return this.config.merge({
       entry: this.entry.toObject(),
 
       module: {
         strictExportPresence: true,
-        rules: this.loaders.values()
+        rules: [{ parser: { requireEnsure: false } }, ...this.loaders.values()]
       },
 
       plugins: this.plugins.values(),

data/package/environments/development.js

@@ -9,11 +9,12 @@ module.exports = class extends Base {
 
     if (devServer.hmr) {
       this.plugins.append('HotModuleReplacement', new webpack.HotModuleReplacementPlugin())
-      this.plugins.append('NamedModules', new webpack.NamedModulesPlugin())
       this.config.output.filename = '[name]-[hash].js'
     }
 
     this.config.merge({
+      mode: 'development',
+      cache: true,
       devtool: 'cheap-module-source-map',
       output: {
         pathinfo: true
@@ -38,7 +39,10 @@ module.exports = class extends Base {
         headers: devServer.headers,
         overlay: devServer.overlay,
         stats: {
-          errorDetails: true
+          entrypoints: false,
+          errorDetails: false,
+          modules: false,
+          moduleTrace: false
         },
         watchOptions: devServer.watch_options
       }

data/package/environments/production.js

@@ -1,57 +1,67 @@
-const webpack = require('webpack')
+const TerserPlugin = require('terser-webpack-plugin')
 const CompressionPlugin = require('compression-webpack-plugin')
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const safePostCssParser = require('postcss-safe-parser')
 const Base = require('./base')
 
 module.exports = class extends Base {
   constructor() {
     super()
 
-    this.plugins.append('ModuleConcatenation', new webpack.optimize.ModuleConcatenationPlugin())
-    this.plugins.append('OptimizeCSSAssets', new OptimizeCSSAssetsPlugin())
-
     this.plugins.append(
-      'UglifyJs',
-      new UglifyJsPlugin({
-        parallel: true,
+      'Compression',
+      new CompressionPlugin({
+        filename: '[path].gz[query]',
+        algorithm: 'gzip',
         cache: true,
-        sourceMap: true,
-        uglifyOptions: {
-          parse: {
-            // Let uglify-js parse ecma 8 code but always output
-            // ES5 compliant code for older browsers
-            ecma: 8
-          },
-          compress: {
-            ecma: 5,
-            warnings: false,
-            comparisons: false
-          },
-          mangle: {
-            safari10: true
-          },
-          output: {
-            ecma: 5,
-            comments: false,
-            ascii_only: true
-          }
-        }
+        test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
       })
     )
 
     this.plugins.append(
-      'Compression',
-      new CompressionPlugin({
-        asset: '[path].gz[query]',
-        algorithm: 'gzip',
-        test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/
+      'OptimizeCSSAssets',
+      new OptimizeCSSAssetsPlugin({
+        parser: safePostCssParser,
+        map: {
+          inline: false,
+          annotation: true
+        }
       })
     )
 
     this.config.merge({
-      devtool: 'nosources-source-map',
-      stats: 'normal'
+      devtool: 'source-map',
+      stats: 'normal',
+      bail: true,
+      optimization: {
+        minimizer: [
+          new TerserPlugin({
+            parallel: true,
+            cache: true,
+            sourceMap: true,
+            terserOptions: {
+              parse: {
+                // Let terser parse ecma 8 code but always output
+                // ES5 compliant code for older browsers
+                ecma: 8
+              },
+              compress: {
+                ecma: 5,
+                warnings: false,
+                comparisons: false
+              },
+              mangle: {
+                safari10: true
+              },
+              output: {
+                ecma: 5,
+                comments: false,
+                ascii_only: true
+              }
+            }
+          })
+        ]
+      }
     })
   }
 }

data/package/rules/babel.js

@@ -1,14 +1,20 @@
-const { join } = require('path')
-const { cache_path: cachePath } = require('../config')
+const { join, resolve } = require('path')
+const { cache_path: cachePath, source_path: sourcePath, resolved_paths: resolvedPaths } = require('../config')
+const { nodeEnv } = require('../env')
 
+// Process application Javascript code with Babel.
+// Uses application .babelrc to apply any transformations
 module.exports = {
-  test: /\.(js|jsx)?(\.erb)?$/,
+  test: /\.(js|jsx|mjs)?(\.erb)?$/,
+  include: [sourcePath, ...resolvedPaths].map(p => resolve(p)),
   exclude: /node_modules/,
   use: [
     {
       loader: 'babel-loader',
       options: {
-        cacheDirectory: join(cachePath, 'babel-loader')
+        cacheDirectory: join(cachePath, 'babel-loader-node-modules'),
+        cacheCompression: nodeEnv === 'production',
+        compact: nodeEnv === 'production'
       }
     }
   ]

data/package/rules/file.js

@@ -1,13 +1,18 @@
 const { join } = require('path')
-const { source_path: sourcePath } = require('../config')
+const { source_path: sourcePath, static_assets_extensions: fileExtensions } = require('../config')
 
 module.exports = {
-  test: /\.(jpg|jpeg|png|gif|tiff|ico|svg|eot|otf|ttf|woff|woff2)$/i,
+  test: new RegExp(`(${fileExtensions.join('|')})$`, 'i'),
   use: [
     {
       loader: 'file-loader',
       options: {
-        name: '[path][name]-[hash].[ext]',
+        name(file) {
+          if (file.includes(sourcePath)) {
+            return 'media/[path][name]-[hash].[ext]'
+          }
+          return 'media/[folder]/[name]-[hash:8].[ext]'
+        },
         context: join(sourcePath)
       }
     }