webpacker 6.0.0.pre.2 → 6.0.0.rc.1

data/lib/webpacker/version.rb

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

data/lib/webpacker/webpack_runner.rb

@@ -15,6 +15,7 @@ module Webpacker
 
       if @argv.include?("--debug-webpacker")
         cmd = [ "node", "--inspect-brk"] + cmd
+        @argv.delete "--debug-webpacker"
       end
 
       if @argv.include?("--trace-deprecation")

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rails/webpacker",
-  "version": "6.0.0-pre.2",
+  "version": "6.0.0-rc.1",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "main": "package/index.js",
   "files": [
@@ -8,40 +8,36 @@
     "lib/install/config/webpacker.yml"
   ],
   "engines": {
-    "node": ">=10.22.1 || ^12 || >=14",
-    "yarn": ">=1 <3"
+    "node": "^12 || >=14",
+    "yarn": ">=1 <4"
   },
   "dependencies": {
-    "@babel/core": "^7.12.9",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-transform-runtime": "^7.12.1",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/runtime": "^7.12.5",
+    "@babel/core": "^7.15.0",
+    "@babel/plugin-proposal-class-properties": "^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-macros": "^3.0.1",
-    "case-sensitive-paths-webpack-plugin": "^2.3.0",
-    "compression-webpack-plugin": "^7.1.0",
-    "core-js": "^3.8.0",
-    "glob": "^7.1.6",
-    "js-yaml": "^3.14.0",
+    "compression-webpack-plugin": "^7.1.2",
+    "glob": "^7.1.7",
+    "js-yaml": "^3.14.1",
     "path-complete-extname": "^1.0.0",
-    "pnp-webpack-plugin": "^1.6.4",
-    "regenerator-runtime": "^0.13.7",
-    "terser-webpack-plugin": "^5.0.3",
-    "webpack": "^5.11.0",
-    "webpack-assets-manifest": "^5.0.0",
-    "webpack-cli": "^4.2.0",
-    "webpack-merge": "^5.7.2",
-    "webpack-sources": "^2.2.0"
+    "pnp-webpack-plugin": "^1.7.0",
+    "terser-webpack-plugin": "^5.1.4",
+    "webpack": "^5.50.0",
+    "webpack-assets-manifest": "^5.0.6",
+    "webpack-cli": "^4.8.0",
+    "webpack-merge": "^5.8.0",
+    "webpack-sources": "^3.2.0"
   },
   "devDependencies": {
-    "eslint": "^7.16.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-prettier": "^7.1.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.21.4",
-    "jest": "^26.5.3"
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-import": "^2.24.0",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.24.0",
+    "jest": "^26.6.3"
   },
   "jest": {
     "testRegex": "(/__tests__/.*|(\\.|/))\\.jsx?$",

data/package/__tests__/development.js

@@ -14,7 +14,7 @@ describe('Development 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'
+      process.env.WEBPACK_DEV_SERVER = 'true'
       const { webpackConfig } = require('../index')
 
       expect(webpackConfig.output.path).toEqual(resolve('public', 'packs'))
@@ -22,7 +22,8 @@ describe('Development environment', () => {
       expect(webpackConfig).toMatchObject({
         devServer: {
           host: 'localhost',
-          port: 3035
+          port: 3035,
+          injectClient: false
         }
       })
     })

data/package/__tests__/env.js

@@ -15,7 +15,8 @@ describe('Env', () => {
       railsEnv: 'development',
       nodeEnv: 'development',
       isProduction: false,
-      isDevelopment: true
+      isDevelopment: true,
+      runningWebpackDevServer: false
     })
   })
 
@@ -26,7 +27,8 @@ describe('Env', () => {
       railsEnv: 'development',
       nodeEnv: 'production',
       isProduction: true,
-      isDevelopment: false
+      isDevelopment: false,
+      runningWebpackDevServer: false
     })
   })
 
@@ -37,7 +39,8 @@ describe('Env', () => {
       railsEnv: 'production',
       nodeEnv: 'production',
       isProduction: true,
-      isDevelopment: false
+      isDevelopment: false,
+      runningWebpackDevServer: false
     })
   })
 
@@ -48,7 +51,8 @@ describe('Env', () => {
       railsEnv: 'staging',
       nodeEnv: 'production',
       isProduction: true,
-      isDevelopment: false
+      isDevelopment: false,
+      runningWebpackDevServer: false
     })
   })
 })

data/package/__tests__/index.js

@@ -0,0 +1,9 @@
+const index = require('../index')
+
+describe('index', () => {
+  test('exports webpack-merge v5 functions', () => {
+    expect(index.merge).toBeInstanceOf(Function)
+    expect(index.mergeWithRules).toBeInstanceOf(Function)
+    expect(index.mergeWithCustomize).toBeInstanceOf(Function)
+  })
+})

data/package/babel/preset.js

@@ -1,3 +1,5 @@
+const { moduleExists } = require('@rails/webpacker')
+
 module.exports = function config(api) {
   const validEnv = ['development', 'test', 'production']
   const currentEnv = api.env()
@@ -7,16 +9,15 @@ module.exports = function config(api) {
 
   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)}".`
+      `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' } }
-      ],
+      isTestEnv && ['@babel/preset-env', { targets: { node: 'current' } }],
       (isProductionEnv || isDevelopmentEnv) && [
         '@babel/preset-env',
         {
@@ -27,18 +28,27 @@ module.exports = function config(api) {
           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-macros',
-      [
-        '@babel/plugin-proposal-class-properties',
-        { loose: true }
-      ],
-      [
-        '@babel/plugin-transform-runtime',
-        { helpers: false }
-      ]
+      ['@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/env.js

@@ -16,9 +16,15 @@ const config = safeLoad(readFileSync(configPath), 'utf8')
 const availableEnvironments = Object.keys(config).join('|')
 const regex = new RegExp(`^(${availableEnvironments})$`, 'g')
 
+// v4 of webpack-dev-server will switch to WEBPACK_DEV_SERVE
+// https://github.com/rails/webpacker/issues/3057
+const runningWebpackDevServer = process.env.WEBPACK_DEV_SERVER === 'true' ||
+  process.env.WEBPACK_DEV_SERVE === 'true'
+
 module.exports = {
   railsEnv: railsEnv && railsEnv.match(regex) ? railsEnv : DEFAULT,
   nodeEnv,
   isProduction,
-  isDevelopment
+  isDevelopment,
+  runningWebpackDevServer
 }

data/package/environments/__tests__/base.js

@@ -17,21 +17,21 @@ describe('Base config', () => {
   describe('config', () => {
     test('should return entry', () => {
       expect(baseConfig.entry.application).toEqual(
-        resolve('app', 'javascript', 'packs', 'application.js')
+        resolve('app', 'packs', 'entrypoints', 'application.js')
       )
     })
 
     test('should return multi file entry points', () => {
       expect(baseConfig.entry.multi_entry.sort()).toEqual([
-        resolve('app', 'javascript', 'packs', 'multi_entry.css'),
-        resolve('app', 'javascript', 'packs', 'multi_entry.js')
+        resolve('app', 'packs', 'entrypoints', 'multi_entry.css'),
+        resolve('app', 'packs', 'entrypoints', 'multi_entry.js')
       ])
     })
 
     test('should return output', () => {
-      expect(baseConfig.output.filename).toEqual('js/[name]-[contenthash].js')
+      expect(baseConfig.output.filename).toEqual('js/[name].js')
       expect(baseConfig.output.chunkFilename).toEqual(
-        'js/[name]-[contenthash].chunk.js'
+        'js/[name].chunk.js'
       )
     })
 
@@ -44,7 +44,7 @@ describe('Base config', () => {
     })
 
     test('should return default plugins', () => {
-      expect(baseConfig.plugins.length).toEqual(4)
+      expect(baseConfig.plugins.length).toEqual(2)
     })
 
     test('should return default resolveLoader', () => {
@@ -53,7 +53,7 @@ describe('Base config', () => {
 
     test('should return default resolve.modules with additions', () => {
       expect(baseConfig.resolve.modules).toEqual([
-        resolve('app', 'javascript'),
+        resolve('app', 'packs'),
         resolve('app/assets'),
         resolve('/etc/yarn'),
         resolve('some.config.js'),

data/package/environments/base.js

@@ -4,19 +4,19 @@
 const { basename, dirname, join, relative, resolve } = require('path')
 const extname = require('path-complete-extname')
 const PnpWebpackPlugin = require('pnp-webpack-plugin')
-const { sync } = require('glob')
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
+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 { isDevelopment } = require('../env')
+const { moduleExists } = require('../utils/helpers')
 
 const getEntryObject = () => {
   const entries = {}
   const rootPath = join(config.source_path, config.source_entry_path)
 
-  sync(`${rootPath}/**/*.*`).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)
@@ -52,8 +52,6 @@ const getModulePaths = () => {
 const getPlugins = () => {
   const plugins = [
     new webpack.EnvironmentPlugin(process.env),
-    PnpWebpackPlugin,
-    new CaseSensitivePathsPlugin(),
     new WebpackAssetsManifest({
       entrypoints: true,
       writeToDisk: true,
@@ -63,37 +61,39 @@ const getPlugins = () => {
     })
   ]
 
-  try {
-    if (require.resolve('css-loader')) {
-      const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-      plugins.push(
-        new MiniCssExtractPlugin({
-          filename: isDevelopment ? '[name].css' : '[name].[contenthash:8].css',
-          chunkFilename: isDevelopment ? '[id].css' : '[id].[contenthash:8].css'
-        })
-      )
-    }
-  } catch (e) {
-    /* Work out what to print here */
+  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',
-    assetModuleFilename: 'static/[hash][ext][query]',
+    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: ['.js', '.mjs', '.ts'],
-    modules: getModulePaths()
+    extensions: ['.js', '.jsx', '.mjs', '.ts', '.tsx', '.coffee'],
+    modules: getModulePaths(),
+    plugins: [PnpWebpackPlugin]
   },
 
   plugins: getPlugins(),
@@ -106,7 +106,7 @@ module.exports = {
   optimization: {
     splitChunks: { chunks: 'all' },
 
-    runtimeChunk: { name: (entrypoint) => `runtime-${entrypoint.name}` }
+    runtimeChunk: 'single'
   },
 
   module: {

data/package/environments/development.js

@@ -1,8 +1,8 @@
 const { merge } = require('webpack-merge')
-const webpack = require('webpack')
 
 const baseConfig = require('./base')
 const devServer = require('../dev_server')
+const { runningWebpackDevServer } = require('../env')
 
 const { outputPath: contentBase, publicPath } = require('../config')
 
@@ -11,14 +11,10 @@ let devConfig = {
   devtool: 'cheap-module-source-map'
 }
 
-if (
-  process.env.WEBPACK_DEV_SERVER &&
-  process.env.WEBPACK_DEV_SERVER !== 'undefined'
-) {
+if (runningWebpackDevServer) {
   if (devServer.hmr) {
     devConfig = merge(devConfig, {
-      output: { filename: '[name]-[hash].js' },
-      plugins: [new webpack.HotModuleReplacementPlugin()]
+      output: { filename: '[name]-[hash].js' }
     })
   }
 
@@ -33,7 +29,9 @@ if (
       https: devServer.https,
       hot: devServer.hmr,
       contentBase,
-      inline: devServer.inline,
+      inline: devServer.inline || devServer.hmr,
+      injectClient: devServer.hmr,
+      injectHot: devServer.hmr,
       useLocalIp: devServer.use_local_ip,
       public: devServer.public,
       publicPath,
@@ -41,6 +39,7 @@ if (
       headers: devServer.headers,
       overlay: devServer.overlay,
       stats: {
+        colors: true,
         entrypoints: false,
         errorDetails: true,
         modules: false,

data/package/environments/production.js

@@ -5,45 +5,42 @@ const { merge } = require('webpack-merge')
 const CompressionPlugin = require('compression-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
 const baseConfig = require('./base')
+const { moduleExists } = require('../utils/helpers')
 
 const getPlugins = () => {
-  let compressionPlugin = new CompressionPlugin({
-    filename: '[path].gz[query]',
-    algorithm: 'gzip',
-    test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
-  })
+  const plugins = []
 
-  if ('brotli' in process.versions) {
-    compressionPlugin = new CompressionPlugin({
-      filename: '[path].br[query]',
-      algorithm: 'brotliCompress',
+  plugins.push(
+    new CompressionPlugin({
+      filename: '[path][base].gz[query]',
+      algorithm: 'gzip',
       test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
     })
+  )
+
+  if ('brotli' in process.versions) {
+    plugins.push(
+      new CompressionPlugin({
+        filename: '[path][base].br[query]',
+        algorithm: 'brotliCompress',
+        test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
+      })
+    )
   }
 
-  const plugins = [compressionPlugin]
+  return plugins
+}
 
-  try {
-    if (require.resolve('css-loader')) {
-      const OptimizeCSSAssetsPlugin = require.resolve(
-        'optimize-css-assets-webpack-plugin'
-      )
-      const safePostCssParser = require.resolve('postcss-safe-parser')
-      plugins.push(
-        new OptimizeCSSAssetsPlugin({
-          parser: safePostCssParser,
-          map: {
-            inline: false,
-            annotation: true
-          }
-        })
-      )
-    }
-  } catch (e) {
-    /* Work out what to output without clutter */
+const tryCssMinimizer = () => {
+  if (
+    moduleExists('css-loader') &&
+    moduleExists('css-minimizer-webpack-plugin')
+  ) {
+    const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+    return new CssMinimizerPlugin()
   }
 
-  return plugins
+  return null
 }
 
 const productionConfig = {
@@ -53,6 +50,7 @@ const productionConfig = {
   plugins: getPlugins(),
   optimization: {
     minimizer: [
+      tryCssMinimizer(),
       new TerserPlugin({
         parallel: Number.parseInt(process.env.WEBPACKER_PARALLEL, 10) || true,
         terserOptions: {
@@ -74,7 +72,7 @@ const productionConfig = {
           }
         }
       })
-    ]
+    ].filter(Boolean)
   }
 }