webpacker 4.3.0 → 5.4.0

data/lib/webpacker/manifest.rb

@@ -29,7 +29,7 @@ class Webpacker::Manifest
   end
 
   def lookup_pack_with_chunks!(name, pack_type = {})
-    lookup_pack_with_chunks(name, pack_type) || handle_missing_entry(name)
+    lookup_pack_with_chunks(name, pack_type) || handle_missing_entry(name, pack_type)
   end
 
   # Computes the relative path for a given Webpacker asset using manifest.json.
@@ -46,7 +46,7 @@ class Webpacker::Manifest
 
   # Like lookup, except that if no asset is found, raises a Webpacker::Manifest::MissingEntryError.
   def lookup!(name, pack_type = {})
-    lookup(name, pack_type) || handle_missing_entry(name)
+    lookup(name, pack_type) || handle_missing_entry(name, pack_type)
   end
 
   private
@@ -75,8 +75,8 @@ class Webpacker::Manifest
       "#{name}.#{manifest_type(pack_type)}"
     end
 
-    def handle_missing_entry(name)
-      raise Webpacker::Manifest::MissingEntryError, missing_file_from_manifest_error(name)
+    def handle_missing_entry(name, pack_type)
+      raise Webpacker::Manifest::MissingEntryError, missing_file_from_manifest_error(full_pack_name(name, pack_type[:type]))
     end
 
     def load

data/lib/webpacker/railtie.rb

@@ -7,49 +7,6 @@ class Webpacker::Engine < ::Rails::Engine
   # Allows Webpacker config values to be set via Rails env config files
   config.webpacker = ActiveSupport::OrderedOptions.new
 
-  initializer "webpacker.set_configs" do |app|
-    if app.config.webpacker.key?(:check_yarn_integrity)
-      Webpacker.config.check_yarn_integrity = app.config.webpacker.check_yarn_integrity
-    end
-  end
-
-  # ================================
-  # Check Yarn Integrity Initializer
-  # ================================
-  #
-  # development (on by default):
-  #
-  #    to turn off:
-  #     - edit config/environments/development.rb
-  #     - add `config.webpacker.check_yarn_integrity = false`
-  #
-  # production (off by default):
-  #
-  #    to turn on:
-  #     - edit config/environments/production.rb
-  #     - add `config.webpacker.check_yarn_integrity = true`
-  initializer "webpacker.yarn_check" do |app|
-    if File.exist?("yarn.lock") && Webpacker.config.config_path.exist? && Webpacker.config.check_yarn_integrity?
-      output = `yarn check --integrity && yarn check --verify-tree 2>&1`
-
-      unless $?.success?
-        $stderr.puts "\n\n"
-        $stderr.puts "========================================"
-        $stderr.puts "  Your Yarn packages are out of date!"
-        $stderr.puts "  Please run `yarn install --check-files` to update."
-        $stderr.puts "========================================"
-        $stderr.puts "\n\n"
-        $stderr.puts "To disable this check, please change `check_yarn_integrity`"
-        $stderr.puts "to `false` in your webpacker config file (config/webpacker.yml)."
-        $stderr.puts "\n\n"
-        $stderr.puts output
-        $stderr.puts "\n\n"
-
-        exit(1)
-      end
-    end
-  end
-
   initializer "webpacker.proxy" do |app|
     insert_middleware = Webpacker.config.dev_server.present? rescue nil
     if insert_middleware

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.3.0".freeze
+  VERSION = "5.4.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.3.0",
+  "version": "5.4.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 <3"
   },
   "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": "^4.0.0",
-    "core-js": "^3.4.0",
-    "css-loader": "^3.2.0",
-    "file-loader": "^4.2.0",
-    "flatted": "^2.0.1",
-    "glob": "^7.1.6",
-    "js-yaml": "^3.13.1",
-    "mini-css-extract-plugin": "^0.8.0",
-    "node-sass": "^4.13.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "@babel/core": "^7.14.3",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.14.2",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-destructuring": "^7.13.17",
+    "@babel/plugin-transform-regenerator": "^7.13.15",
+    "@babel/plugin-transform-runtime": "^7.14.3",
+    "@babel/preset-env": "^7.14.2",
+    "@babel/runtime": "^7.14.0",
+    "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.12.1",
+    "css-loader": "^3.6.0",
+    "file-loader": "^6.2.0",
+    "flatted": "^3.1.1",
+    "glob": "^7.1.7",
+    "js-yaml": "^3.14.1",
+    "mini-css-extract-plugin": "^0.9.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.6",
     "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": "^1.32.13",
+    "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.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.26.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-plugin-import": "^2.23.2",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.23.2",
+    "jest": "^26.6.3"
   },
   "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', () => {
@@ -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

@@ -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(),