webpacker 4.2.2 → 5.2.0

data/lib/webpacker/runner.rb

@@ -12,6 +12,7 @@ module Webpacker
       @app_path              = File.expand_path(".", Dir.pwd)
       @node_modules_bin_path = ENV["WEBPACKER_NODE_MODULES_BIN_PATH"] || `yarn bin`.chomp
       @webpack_config        = File.join(@app_path, "config/webpack/#{ENV["NODE_ENV"]}.js")
+      @webpacker_config      = File.join(@app_path, "config/webpacker.yml")
 
       unless File.exist?(@webpack_config)
         $stderr.puts "webpack config #{@webpack_config} not found, please run 'bundle exec rails webpacker:install' to install Webpacker with default configs or add the missing config file for your custom environment."

data/lib/webpacker/version.rb

@@ -1,4 +1,4 @@
 module Webpacker
   # Change the version in package.json too, please!
-  VERSION = "4.2.2".freeze
+  VERSION = "5.2.0".freeze
 end

data/lib/webpacker/webpack_runner.rb

@@ -5,6 +5,7 @@ module Webpacker
   class WebpackRunner < Webpacker::Runner
     def run
       env = Webpacker::Compiler.env
+      env["WEBPACKER_CONFIG"] = @webpacker_config
 
       cmd = if node_modules_bin_exist?
         ["#{@node_modules_bin_path}/webpack"]
@@ -12,9 +13,8 @@ module Webpacker
         ["yarn", "webpack"]
       end
 
-      if ARGV.include?("--debug")
+      if @argv.include?("--debug-webpacker")
         cmd = [ "node", "--inspect-brk"] + cmd
-        ARGV.delete("--debug")
       end
 
       cmd += ["--config", @webpack_config] + @argv

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rails/webpacker",
-  "version": "4.2.2",
+  "version": "5.2.0",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "main": "package/index.js",
   "files": [
@@ -8,56 +8,56 @@
     "lib/install/config/webpacker.yml"
   ],
   "engines": {
-    "node": ">=8.16.0",
-    "yarn": ">=1.0.0"
+    "node": ">=10.17.0",
+    "yarn": ">=1 <2"
   },
   "dependencies": {
-    "@babel/core": "^7.7.2",
-    "@babel/plugin-proposal-class-properties": "^7.7.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-transform-destructuring": "^7.6.0",
-    "@babel/plugin-transform-regenerator": "^7.7.0",
-    "@babel/plugin-transform-runtime": "^7.6.2",
-    "@babel/preset-env": "^7.7.1",
-    "@babel/runtime": "^7.7.2",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-dynamic-import-node": "^2.3.0",
-    "babel-plugin-macros": "^2.6.1",
-    "case-sensitive-paths-webpack-plugin": "^2.2.0",
-    "compression-webpack-plugin": "^3.0.0",
-    "core-js": "^3.4.0",
-    "css-loader": "^3.2.0",
-    "file-loader": "^4.2.0",
-    "flatted": "^2.0.1",
+    "@babel/core": "^7.11.1",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.10.1",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-destructuring": "^7.10.1",
+    "@babel/plugin-transform-regenerator": "^7.10.1",
+    "@babel/plugin-transform-runtime": "^7.11.0",
+    "@babel/preset-env": "^7.11.0",
+    "@babel/runtime": "^7.11.2",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
+    "babel-plugin-macros": "^2.8.0",
+    "case-sensitive-paths-webpack-plugin": "^2.3.0",
+    "compression-webpack-plugin": "^4.0.0",
+    "core-js": "^3.6.5",
+    "css-loader": "^3.5.3",
+    "file-loader": "^6.0.0",
+    "flatted": "^3.0.4",
     "glob": "^7.1.6",
-    "js-yaml": "^3.13.1",
-    "mini-css-extract-plugin": "^0.8.0",
-    "node-sass": "^4.13.0",
+    "js-yaml": "^3.14.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.14.1",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "path-complete-extname": "^1.0.0",
-    "pnp-webpack-plugin": "^1.5.0",
-    "postcss-flexbugs-fixes": "^4.1.0",
+    "pnp-webpack-plugin": "^1.6.4",
+    "postcss-flexbugs-fixes": "^4.2.1",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",
-    "postcss-safe-parser": "^4.0.1",
-    "regenerator-runtime": "^0.13.3",
-    "sass-loader": "7.3.1",
-    "style-loader": "^1.0.0",
-    "terser-webpack-plugin": "^2.2.1",
-    "webpack": "^4.41.2",
+    "postcss-safe-parser": "^4.0.2",
+    "regenerator-runtime": "^0.13.7",
+    "sass-loader": "^8.0.2",
+    "style-loader": "^1.2.1",
+    "terser-webpack-plugin": "^4.0.0",
+    "webpack": "^4.44.1",
     "webpack-assets-manifest": "^3.1.1",
-    "webpack-cli": "^3.3.10",
+    "webpack-cli": "^3.3.12",
     "webpack-sources": "^1.4.3"
   },
   "devDependencies": {
-    "eslint": "^6.6.0",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.16.0",
-    "jest": "^24.9.0"
+    "eslint": "^7.6.0",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-react": "^7.20.5",
+    "jest": "^26.2.2"
   },
   "jest": {
     "testRegex": "(/__tests__/.*|(\\.|/))\\.jsx?$",

data/package/__tests__/config.js

@@ -23,6 +23,16 @@ describe('Config', () => {
     expect(config.publicPath).toEqual('http://foo.com/packs/')
   })
 
+  test('should return additional paths as listed in app config, with resolved paths', () => {
+    expect(config.additional_paths).toEqual(
+      [
+        'app/assets',
+        '/etc/yarn',
+        'app/elm'
+      ]
+    )
+  })
+
   test('should return extensions as listed in app config', () => {
     expect(config.extensions).toEqual([
       '.mjs',
@@ -37,7 +47,8 @@ describe('Config', () => {
       '.svg',
       '.gif',
       '.jpeg',
-      '.jpg'
+      '.jpg',
+      '.elm'
     ])
   })
 

data/package/__tests__/dev_server.js

@@ -13,11 +13,13 @@ describe('DevServer', () => {
     process.env.RAILS_ENV = 'development'
     process.env.WEBPACKER_DEV_SERVER_HOST = '0.0.0.0'
     process.env.WEBPACKER_DEV_SERVER_PORT = 5000
+    process.env.WEBPACKER_DEV_SERVER_DISABLE_HOST_CHECK = false
 
     const devServer = require('../dev_server')
     expect(devServer).toBeDefined()
     expect(devServer.host).toEqual('0.0.0.0')
     expect(devServer.port).toEqual('5000')
+    expect(devServer.disable_host_check).toBe(false)
   })
 
   test('with custom env prefix', () => {

data/package/__tests__/development.js

@@ -11,9 +11,10 @@ describe('Development environment', () => {
   describe('toWebpackConfig', () => {
     beforeEach(() => jest.resetModules())
 
-    test('should use development config and environment', () => {
+    test('should use development config and environment including devServer if WEBPACK_DEV_SERVER', () => {
       process.env.RAILS_ENV = 'development'
       process.env.NODE_ENV = 'development'
+      process.env.WEBPACK_DEV_SERVER = 'YES'
       const { environment } = require('../index')
 
       const config = environment.toWebpackConfig()
@@ -26,5 +27,17 @@ describe('Development environment', () => {
         }
       })
     })
+
+    test('should use development config and environment if WEBPACK_DEV_SERVER', () => {
+      process.env.RAILS_ENV = 'development'
+      process.env.NODE_ENV = 'development'
+      process.env.WEBPACK_DEV_SERVER = undefined
+      const { environment } = require('../index')
+
+      const config = environment.toWebpackConfig()
+      expect(config.output.path).toEqual(resolve('public', 'packs'))
+      expect(config.output.publicPath).toEqual('/packs/')
+      expect(config.devServer).toEqual(undefined)
+    })
   })
 })

data/package/config.js

@@ -4,9 +4,9 @@ const { readFileSync } = require('fs')
 const deepMerge = require('./utils/deep_merge')
 const { isArray, ensureTrailingSlash } = require('./utils/helpers')
 const { railsEnv } = require('./env')
+const configPath = require('./configPath')
 
 const defaultConfigPath = require.resolve('../lib/install/config/webpacker.yml')
-const configPath = resolve('config', 'webpacker.yml')
 
 const getDefaultConfig = () => {
   const defaultConfig = safeLoad(readFileSync(defaultConfigPath), 'utf8')
@@ -24,6 +24,9 @@ if (isArray(app.static_assets_extensions) && app.static_assets_extensions.length
 const config = deepMerge(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/configPath.js

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

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]-[contenthash].js')
-      expect(config.output.chunkFilename).toEqual('js/[name]-[contenthash].chunk.js')
+      expect(config.output.chunkFilename).toEqual(
+        'js/[name]-[contenthash].chunk.js'
+      )
     })
 
     test('should return default loader rules for each file in config/loaders', () => {
@@ -40,8 +50,24 @@ describe('Environment', () => {
       const defaultRules = Object.keys(rules)
       const configRules = config.module.rules
 
-      expect(defaultRules.length).toEqual(7)
-      expect(configRules.length).toEqual(8)
+      expect(defaultRules.length).toEqual(6)
+      expect(configRules.length).toEqual(6)
+    })
+
+    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

@@ -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
@@ -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: true,
-          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
+        }
+      })
+    }
   }
 }