webpacker 4.0.2 → 5.4.3

data/package/configPath.js

@@ -0,0 +1,3 @@
+const { resolve } = require('path')
+
+module.exports = process.env.WEBPACKER_CONFIG || resolve('config', 'webpacker.yml')

data/package/config_types/config_list.js

@@ -38,7 +38,7 @@ class ConfigList extends Array {
   }
 
   getIndex(key, shouldThrow = false) {
-    const index = this.findIndex(entry => (
+    const index = this.findIndex((entry) => (
       entry === key
         || entry.key === key
         || (entry.constructor && entry.constructor.name === key)
@@ -64,11 +64,11 @@ class ConfigList extends Array {
   }
 
   values() {
-    return this.map(item => item.value)
+    return this.map((item) => item.value)
   }
 
   keys() {
-    return this.map(item => item.key)
+    return this.map((item) => item.key)
   }
 }
 

data/package/config_types/config_object.js

@@ -42,7 +42,7 @@ class ConfigObject extends Object {
   toObject() {
     const object = {}
     /* eslint no-return-assign: 0 */
-    Object.keys(this).forEach(key => (object[key] = this[key]))
+    Object.keys(this).forEach((key) => (object[key] = this[key]))
     return object
   }
 

data/package/dev_server.js

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

data/package/env.js

@@ -1,10 +1,9 @@
-const { resolve } = require('path')
 const { safeLoad } = require('js-yaml')
 const { readFileSync } = require('fs')
 
 const NODE_ENVIRONMENTS = ['development', 'production', 'test']
 const DEFAULT = 'production'
-const configPath = resolve('config', 'webpacker.yml')
+const configPath = require('./configPath')
 
 const railsEnv = process.env.RAILS_ENV
 const nodeEnv = process.env.NODE_ENV

data/package/environments/__tests__/base.js

@@ -29,10 +29,20 @@ describe('Environment', () => {
       )
     })
 
+    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')
+      ])
+    })
+
     test('should return output', () => {
       const config = environment.toWebpackConfig()
-      expect(config.output.filename).toEqual('js/[name]-[chunkhash].js')
-      expect(config.output.chunkFilename).toEqual('js/[name]-[chunkhash].chunk.js')
+      expect(config.output.filename).toEqual('js/[name]-[contenthash].js')
+      expect(config.output.chunkFilename).toEqual(
+        'js/[name]-[contenthash].chunk.js'
+      )
     })
 
     test('should return default loader rules for each file in config/loaders', () => {
@@ -41,7 +51,23 @@ describe('Environment', () => {
       const configRules = config.module.rules
 
       expect(defaultRules.length).toEqual(7)
-      expect(configRules.length).toEqual(8)
+      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()
+    })
+
+    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()
     })
 
     test('should return default plugins', () => {
@@ -60,6 +86,7 @@ describe('Environment', () => {
         resolve('app', 'javascript'),
         resolve('app/assets'),
         resolve('/etc/yarn'),
+        resolve('app/elm'),
         'node_modules'
       ])
     })

data/package/environments/base.js

@@ -22,7 +22,7 @@ const config = require('../config')
 
 const getLoaderList = () => {
   const result = new ConfigList()
-  Object.keys(rules).forEach(key => result.append(key, rules[key]))
+  Object.keys(rules).forEach((key) => result.append(key, rules[key]))
   return result
 }
 
@@ -30,7 +30,7 @@ const getPluginList = () => {
   const result = new ConfigList()
   result.append(
     'Environment',
-    new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(process.env)))
+    new webpack.EnvironmentPlugin(process.env)
   )
   result.append('CaseSensitivePaths', new CaseSensitivePathsPlugin())
   result.append(
@@ -43,7 +43,6 @@ const getPluginList = () => {
   result.append(
     'Manifest',
     new WebpackAssetsManifest({
-      integrity: false,
       entrypoints: true,
       writeToDisk: true,
       publicPath: config.publicPathWithoutCDN
@@ -65,7 +64,18 @@ const getEntryObject = () => {
   paths.forEach((path) => {
     const namespace = relative(join(rootPath), dirname(path))
     const name = join(namespace, basename(path, extname(path)))
-    result.set(name, resolve(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)
+    if (previousPaths) {
+      previousPaths = Array.isArray(previousPaths) ? previousPaths : [previousPaths]
+      previousPaths.push(assetPaths)
+      assetPaths = previousPaths
+    }
+
+    result.set(name, assetPaths)
   })
   return result
 }
@@ -73,8 +83,8 @@ const getEntryObject = () => {
 const getModulePaths = () => {
   const result = new ConfigList()
   result.append('source', resolve(config.source_path))
-  if (config.resolved_paths) {
-    config.resolved_paths.forEach(path => result.append(path, resolve(path)))
+  if (config.additional_paths) {
+    config.additional_paths.forEach((path) => result.append(path, resolve(path)))
   }
   result.append('node_modules', 'node_modules')
   return result
@@ -83,8 +93,8 @@ const getModulePaths = () => {
 const getBaseConfig = () => new ConfigObject({
   mode: 'production',
   output: {
-    filename: 'js/[name]-[chunkhash].js',
-    chunkFilename: 'js/[name]-[chunkhash].chunk.js',
+    filename: 'js/[name]-[contenthash].js',
+    chunkFilename: 'js/[name]-[contenthash].chunk.js',
     hotUpdateChunkFilename: 'js/[id]-[hash].hot-update.js',
     path: config.outputPath,
     publicPath: config.publicPath
@@ -126,7 +136,7 @@ module.exports = class Base {
         // https://twitter.com/wSokra/status/969633336732905474
         splitChunks: {
           chunks: 'all',
-          name: false
+          name: true
         },
         // Separate runtime chunk to enable long term caching
         // https://twitter.com/wSokra/status/969679223278505985
@@ -153,7 +163,7 @@ module.exports = class Base {
 
       module: {
         strictExportPresence: true,
-        rules: [{ parser: { requireEnsure: false } }, ...this.loaders.values()]
+        rules: this.loaders.values()
       },
 
       plugins: this.plugins.values(),

data/package/environments/development.js

@@ -7,45 +7,47 @@ module.exports = class extends Base {
   constructor() {
     super()
 
-    if (devServer.hmr) {
-      this.plugins.append('HotModuleReplacement', new webpack.HotModuleReplacementPlugin())
-      this.config.output.filename = '[name]-[hash].js'
-    }
-
     this.config.merge({
       mode: 'development',
-      cache: true,
-      devtool: 'cheap-module-source-map',
-      output: {
-        pathinfo: true
-      },
-      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: false,
-          modules: false,
-          moduleTrace: false
-        },
-        watchOptions: devServer.watch_options
-      }
+      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
+        }
+      })
+    }
   }
 }

data/package/environments/production.js

@@ -13,11 +13,21 @@ module.exports = class extends Base {
       new CompressionPlugin({
         filename: '[path].gz[query]',
         algorithm: 'gzip',
-        cache: true,
         test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
       })
     )
 
+    if ('brotli' in process.versions) {
+      this.plugins.append(
+        'Compression Brotli',
+        new CompressionPlugin({
+          filename: '[path].br[query]',
+          algorithm: 'brotliCompress',
+          test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
+        })
+      )
+    }
+
     this.plugins.append(
       'OptimizeCSSAssets',
       new OptimizeCSSAssetsPlugin({
@@ -36,7 +46,7 @@ module.exports = class extends Base {
       optimization: {
         minimizer: [
           new TerserPlugin({
-            parallel: true,
+            parallel: Number.parseInt(process.env.WEBPACKER_PARALLEL, 10) || true,
             cache: true,
             sourceMap: true,
             terserOptions: {

data/package/rules/babel.js

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

data/package/rules/file.js

@@ -1,4 +1,4 @@
-const { join } = require('path')
+const { join, normalize } = require('path')
 const { source_path: sourcePath, static_assets_extensions: fileExtensions } = require('../config')
 
 module.exports = {
@@ -8,11 +8,12 @@ module.exports = {
       loader: 'file-loader',
       options: {
         name(file) {
-          if (file.includes(sourcePath)) {
+          if (file.includes(normalize(sourcePath))) {
             return 'media/[path][name]-[hash].[ext]'
           }
           return 'media/[folder]/[name]-[hash:8].[ext]'
         },
+        esModule: false,
         context: join(sourcePath)
       }
     }

data/package/rules/node_modules.js

@@ -1,19 +1,18 @@
-const { join } = require('path')
-const { cache_path: cachePath } = require('../config')
 const { nodeEnv } = require('../env')
 
 // Compile standard ES features for JS in node_modules with Babel.
+//   Regex details for exclude: https://regex101.com/r/SKPnnv/1
 module.exports = {
   test: /\.(js|mjs)$/,
   include: /node_modules/,
-  exclude: /@babel(?:\/|\\{1,2})runtime/,
+  exclude: /(?:@?babel(?:\/|\\{1,2}|-).+)|regenerator-runtime|core-js|^webpack$|^webpack-assets-manifest$|^webpack-cli$|^webpack-sources$|^@rails\/webpacker$/,
   use: [
     {
       loader: 'babel-loader',
       options: {
         babelrc: false,
         presets: [['@babel/preset-env', { modules: false }]],
-        cacheDirectory: join(cachePath, 'babel-loader-node-modules'),
+        cacheDirectory: true,
         cacheCompression: nodeEnv === 'production',
         compact: false,
         sourceMaps: false

data/package/rules/sass.js

@@ -1,8 +1,17 @@
+/* eslint global-require: 0 */
+
 const getStyleRule = require('../utils/get_style_rule')
+const { additional_paths: includePaths } = require('../config')
 
-module.exports = getStyleRule(/\.(scss|sass)$/i, false, [
+module.exports = getStyleRule(/\.(scss|sass)(\.erb)?$/i, false, [
   {
     loader: 'sass-loader',
-    options: { sourceMap: true }
+    options: {
+      sourceMap: true,
+      implementation: require('sass'),
+      sassOptions: {
+        includePaths
+      }
+    }
   }
 ])

data/package/utils/__tests__/get_style_rule.js

@@ -44,6 +44,15 @@ describe('getStyleRule', () => {
     expect(cssRule.use).toMatchObject(expect.arrayContaining(expectation))
   })
 
+  test('adds style-loader when extract_css is true', () => {
+    const expectation = [{loader: 'style-loader'}]
+
+    require('../../config').extract_css = false
+    const cssRule = getStyleRule(/\.(css)$/i)
+
+    expect(cssRule.use).toMatchObject(expect.objectContaining(expectation))
+  })
+
   test(`doesn't add mini-css-extract-plugin when extract_css is false`, () => {
     const MiniCssExtractPlugin = require('mini-css-extract-plugin')
     const expectation = [MiniCssExtractPlugin.loader]

data/package/utils/deep_merge.js

@@ -10,11 +10,11 @@ const deepMerge = (target, source) => {
   if (!(isObject(target) && isObject(source))) return source
 
   return [...Object.keys(target), ...Object.keys(source)].reduce(
-    (result, key) => (Object.assign(
-      {},
-      result,
-      { [key]: deepMerge(target[key], source[key]) }
-    )),
+    (result, key) => ({
+
+      ...result,
+      [key]: deepMerge(target[key], source[key])
+    }),
     {}
   )
 }

data/package/utils/get_style_rule.js

@@ -1,17 +1,9 @@
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const { resolve } = require('path')
-const devServer = require('../dev_server')
 const config = require('../config')
 
-const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
-const isHMR = inDevServer && (devServer && devServer.hmr)
-
 const styleLoader = {
-  loader: 'style-loader',
-  options: {
-    hmr: isHMR,
-    sourceMap: true
-  }
+  loader: 'style-loader'
 }
 
 const getStyleRule = (test, modules = false, preprocessors = []) => {
@@ -21,8 +13,9 @@ const getStyleRule = (test, modules = false, preprocessors = []) => {
       options: {
         sourceMap: true,
         importLoaders: 2,
-        localIdentName: '[name]__[local]___[hash:base64:5]',
-        modules
+        modules: modules ? {
+          localIdentName: '[name]__[local]___[hash:base64:5]'
+        } : false
       }
     },
     {
@@ -44,7 +37,9 @@ const getStyleRule = (test, modules = false, preprocessors = []) => {
   }
 
   // sideEffects - See https://github.com/webpack/webpack/issues/6571
-  return Object.assign({}, { test, use, sideEffects: !modules }, options)
+  return {
+    test, use, sideEffects: !modules, ...options
+  }
 }
 
 module.exports = getStyleRule

data/package/utils/helpers.js

@@ -1,29 +1,29 @@
-const { stringify } = require('flatted/cjs')
+const { stringify } = require('flatted')
 
-const isObject = value => typeof value === 'object'
+const isObject = (value) => typeof value === 'object'
   && value !== null
   && (value.length === undefined || value.length === null)
 
-const isNotObject = value => !isObject(value)
+const isNotObject = (value) => !isObject(value)
 
-const isBoolean = str => /^true/.test(str) || /^false/.test(str)
+const isBoolean = (str) => /^true/.test(str) || /^false/.test(str)
 
-const isEmpty = value => value === null || value === undefined
+const isEmpty = (value) => value === null || value === undefined
 
-const isString = key => key && typeof key === 'string'
+const isString = (key) => key && typeof key === 'string'
 
 const isStrPath = (key) => {
   if (!isString(key)) throw new Error(`Key ${key} should be string`)
   return isString(key) && key.includes('.')
 }
 
-const isArray = value => Array.isArray(value)
+const isArray = (value) => Array.isArray(value)
 
 const isEqual = (target, source) => stringify(target) === stringify(source)
 
-const canMerge = value => isObject(value) || isArray(value)
+const canMerge = (value) => isObject(value) || isArray(value)
 
-const prettyPrint = obj => JSON.stringify(obj, null, 2)
+const prettyPrint = (obj) => JSON.stringify(obj, null, 2)
 
 const chdirTestApp = () => {
   try {
@@ -39,7 +39,7 @@ const resetEnv = () => {
   process.env = {}
 }
 
-const ensureTrailingSlash = path => (path.endsWith('/') ? path : `${path}/`)
+const ensureTrailingSlash = (path) => (path.endsWith('/') ? path : `${path}/`)
 
 module.exports = {
   chdirTestApp,

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rails/webpacker",
-  "version": "4.0.2",
+  "version": "5.4.3",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "main": "package/index.js",
   "files": [
@@ -8,55 +8,56 @@
     "lib/install/config/webpacker.yml"
   ],
   "engines": {
-    "node": ">=6.14.4",
-    "yarn": ">=1.0.0"
+    "node": ">=10.17.0",
+    "yarn": ">=1 <4"
   },
   "dependencies": {
-    "@babel/core": "^7.3.4",
-    "@babel/plugin-proposal-class-properties": "^7.3.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.3.4",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-transform-destructuring": "^7.3.2",
-    "@babel/plugin-transform-regenerator": "^7.3.4",
-    "@babel/plugin-transform-runtime": "^7.3.4",
-    "@babel/polyfill": "^7.2.5",
-    "@babel/preset-env": "^7.3.4",
-    "@babel/runtime": "^7.3.4",
-    "babel-loader": "^8.0.5",
-    "babel-plugin-dynamic-import-node": "^2.2.0",
-    "babel-plugin-macros": "^2.5.0",
-    "case-sensitive-paths-webpack-plugin": "^2.2.0",
-    "compression-webpack-plugin": "^2.0.0",
-    "css-loader": "^2.1.0",
-    "file-loader": "^3.0.1",
-    "flatted": "^2.0.0",
-    "glob": "^7.1.3",
-    "js-yaml": "^3.12.2",
-    "mini-css-extract-plugin": "^0.5.0",
-    "node-sass": "^4.11.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "@babel/core": "^7.15.0",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-destructuring": "^7.14.7",
+    "@babel/plugin-transform-regenerator": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/runtime": "^7.15.3",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
+    "babel-plugin-macros": "^2.8.0",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
+    "compression-webpack-plugin": "^4.0.1",
+    "core-js": "^3.16.2",
+    "css-loader": "^3.6.0",
+    "file-loader": "^6.2.0",
+    "flatted": "^3.2.2",
+    "glob": "^7.1.7",
+    "js-yaml": "^3.14.1",
+    "mini-css-extract-plugin": "^0.9.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.8",
     "path-complete-extname": "^1.0.0",
-    "pnp-webpack-plugin": "^1.3.1",
-    "postcss-flexbugs-fixes": "^4.1.0",
+    "pnp-webpack-plugin": "^1.7.0",
+    "postcss-flexbugs-fixes": "^4.2.1",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.6.0",
-    "postcss-safe-parser": "^4.0.1",
-    "sass-loader": "^7.1.0",
-    "style-loader": "^0.23.1",
-    "terser-webpack-plugin": "^1.2.3",
-    "webpack": "^4.29.6",
+    "postcss-preset-env": "^6.7.0",
+    "postcss-safe-parser": "^4.0.2",
+    "regenerator-runtime": "^0.13.9",
+    "sass": "^1.38.0",
+    "sass-loader": "10.1.1",
+    "style-loader": "^1.3.0",
+    "terser-webpack-plugin": "^4.2.3",
+    "webpack": "^4.46.0",
     "webpack-assets-manifest": "^3.1.1",
-    "webpack-cli": "^3.2.3",
-    "webpack-sources": "^1.3.0"
+    "webpack-cli": "^3.3.12",
+    "webpack-sources": "^1.4.3"
   },
   "devDependencies": {
-    "eslint": "^5.15.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-react": "^7.12.4",
-    "jest": "^24.1.0"
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-plugin-import": "^2.24.0",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.24.0",
+    "jest": "^27.0.6"
   },
   "jest": {
     "testRegex": "(/__tests__/.*|(\\.|/))\\.jsx?$",

data/test/command_test.rb

@@ -24,4 +24,10 @@ class CommandTest < Minitest::Test
       end
     end
   end
+
+  def test_clean_command_works_with_nested_hashes_and_without_any_compiled_files
+    File.stub :delete, true do
+      assert Webpacker.commands.clean
+    end
+  end
 end