webpacker 6.0.0.pre.2 → 6.0.0.rc.6

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/config.js

@@ -1,5 +1,5 @@
 const { resolve } = require('path')
-const { safeLoad } = require('js-yaml')
+const { load } = require('js-yaml')
 const { readFileSync } = require('fs')
 const { merge } = require('webpack-merge')
 const { ensureTrailingSlash } = require('./utils/helpers')
@@ -9,12 +9,12 @@ const configPath = require('./configPath')
 const defaultConfigPath = require.resolve('../lib/install/config/webpacker.yml')
 
 const getDefaultConfig = () => {
-  const defaultConfig = safeLoad(readFileSync(defaultConfigPath), 'utf8')
+  const defaultConfig = load(readFileSync(defaultConfigPath), 'utf8')
   return defaultConfig[railsEnv] || defaultConfig.production
 }
 
 const defaults = getDefaultConfig()
-const app = safeLoad(readFileSync(configPath), 'utf8')[railsEnv]
+const app = load(readFileSync(configPath), 'utf8')[railsEnv]
 
 const config = merge(defaults, app)
 config.outputPath = resolve(config.public_root_path, config.public_output_path)

data/package/env.js

@@ -1,4 +1,4 @@
-const { safeLoad } = require('js-yaml')
+const { load } = require('js-yaml')
 const { readFileSync } = require('fs')
 
 const NODE_ENVIRONMENTS = ['development', 'production', 'test']
@@ -12,13 +12,16 @@ const nodeEnv
 const isProduction = nodeEnv === 'production'
 const isDevelopment = nodeEnv === 'development'
 
-const config = safeLoad(readFileSync(configPath), 'utf8')
+const config = load(readFileSync(configPath), 'utf8')
 const availableEnvironments = Object.keys(config).join('|')
 const regex = new RegExp(`^(${availableEnvironments})$`, 'g')
 
+const runningWebpackDevServer = process.env.WEBPACK_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,43 +11,44 @@ let devConfig = {
   devtool: 'cheap-module-source-map'
 }
 
-if (
-  process.env.WEBPACK_DEV_SERVER &&
-  process.env.WEBPACK_DEV_SERVER !== 'undefined'
-) {
-  if (devServer.hmr) {
-    devConfig = merge(devConfig, {
-      output: { filename: '[name]-[hash].js' },
-      plugins: [new webpack.HotModuleReplacementPlugin()]
-    })
+if (runningWebpackDevServer) {
+  const liveReload = devServer.live_reload !== undefined ? devServer.live_reload : !devServer.hmr
+
+  const devServerConfig = {
+    devMiddleware: {
+      publicPath
+    },
+    compress: devServer.compress,
+    allowedHosts: devServer.allowed_hosts,
+    host: devServer.host,
+    port: devServer.port,
+    https: devServer.https,
+    hot: devServer.hmr,
+    liveReload,
+    historyApiFallback: { disableDotRule: true },
+    headers: devServer.headers,
+    static: {
+      publicPath: contentBase
+    }
+  }
+
+  if (devServer.static) {
+    devServerConfig.static = { ...devServerConfig.static, ...devServer.static }
+  }
+
+  if (devServer.client) {
+    devServerConfig.client = devServer.client
   }
 
   devConfig = merge(devConfig, {
-    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
-    }
+    stats: {
+      colors: true,
+      entrypoints: false,
+      errorDetails: true,
+      modules: false,
+      moduleTrace: false
+    },
+    devServer: devServerConfig
   })
 }
 

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)
   }
 }
 

data/package/index.js

@@ -1,13 +1,16 @@
 /* eslint global-require: 0 */
 /* eslint import/no-dynamic-require: 0 */
 
+const webpackMerge = require('webpack-merge')
 const { resolve } = require('path')
 const { existsSync } = require('fs')
 const baseConfig = require('./environments/base')
-const loaders = require('./rules')
+const rules = require('./rules')
 const config = require('./config')
 const devServer = require('./dev_server')
 const { nodeEnv } = require('./env')
+const { moduleExists, canProcess } = require('./utils/helpers')
+const inliningCss = require('./inliningCss')
 
 const webpackConfig = () => {
   const path = resolve(__dirname, 'environments', `${nodeEnv}.js`)
@@ -20,5 +23,9 @@ module.exports = {
   devServer,
   webpackConfig: webpackConfig(),
   baseConfig,
-  loaders
+  rules,
+  moduleExists,
+  canProcess,
+  inliningCss,
+  ...webpackMerge
 }

data/package/inliningCss.js

@@ -0,0 +1,7 @@
+const { runningWebpackDevServer } = require('./env')
+const devServer = require('./dev_server')
+
+// This logic is tied to lib/webpacker/instance.rb
+const inliningCss = runningWebpackDevServer && devServer.hmr
+
+module.exports = inliningCss

data/package/rules/babel.js

@@ -8,7 +8,7 @@ const {
 const { isProduction } = require('../env')
 
 module.exports = {
-  test: /\.(js|jsx|mjs|ts|tsx)?(\.erb)?$/,
+  test: /\.(js|jsx|mjs|ts|tsx|coffee)?(\.erb)?$/,
   include: [sourcePath, ...additionalPaths].map((p) => {
     try {
       return realpathSync(p)

data/package/rules/coffee.js

@@ -1,6 +1,6 @@
-module.exports = {
+const { canProcess } = require('../utils/helpers')
+
+module.exports = canProcess('coffee-loader', (resolvedPath) => ({
   test: /\.coffee(\.erb)?$/,
-  use: [
-    { loader: require.resolve('coffee-loader') }
-  ]
-}
+  use: [{ loader: resolvedPath }]
+}))

data/package/rules/erb.js

@@ -1,13 +1,15 @@
+const { canProcess } = require('../utils/helpers')
+
 const runner = /^win/.test(process.platform) ? 'ruby ' : ''
 
-module.exports = {
+module.exports = canProcess('rails-erb-loader', (resolvedPath) => ({
   test: /\.erb$/,
   enforce: 'pre',
   exclude: /node_modules/,
   use: [
     {
-      loader: require.resolve('rails-erb-loader'),
+      loader: resolvedPath,
       options: { runner: `${runner}bin/rails runner` }
     }
   ]
-}
+}))

data/package/rules/file.js

@@ -13,9 +13,11 @@ module.exports = {
     /\.ttf$/,
     /\.woff$/,
     /\.woff2$/,
-    /\.html$/,
-    /\.json$/
+    /\.svg$/
   ],
   exclude: [/\.(js|mjs|jsx|ts|tsx)$/],
-  type: 'asset/resource'
+  type: 'asset/resource',
+  generator: {
+    filename: 'static/[name]-[hash][ext][query]'
+  }
 }

data/package/rules/index.js

@@ -1,24 +1,16 @@
 /* eslint global-require: 0 */
 /* eslint import/no-dynamic-require: 0 */
 
-const load = (name) => {
-  try {
-    return require(`./${name}`)
-  } catch (e) {
-    return null
-  }
-}
-
 const rules = {
-  file: load('file'),
-  svg: load('svg'),
-  css: load('css'),
-  sass: load('sass'),
-  babel: load('babel'),
-  erb: load('erb'),
-  coffee: load('coffee'),
-  html: load('html'),
-  less: load('less')
+  raw: require('./raw'),
+  file: require('./file'),
+  css: require('./css'),
+  sass: require('./sass'),
+  babel: require('./babel'),
+  erb: require('./erb'),
+  coffee: require('./coffee'),
+  less: require('./less'),
+  stylus: require('./stylus')
 }
 
 module.exports = Object.keys(rules)

data/package/rules/less.js

@@ -1,18 +1,22 @@
 const path = require('path')
+const { canProcess } = require('../utils/helpers')
 const getStyleRule = require('../utils/get_style_rule')
+
 const {
   additional_paths: paths,
   source_path: sourcePath
 } = require('../config')
 
-module.exports = getStyleRule(/\.(less)(\.erb)?$/i, [
-  {
-    loader: require.resolve('less-loader'),
-    options: {
-      lessOptions: {
-        paths: [path.resolve(__dirname, 'node_modules'), sourcePath, ...paths]
-      },
-      sourceMap: true
+module.exports = canProcess('less-loader', (resolvedPath) =>
+  getStyleRule(/\.(less)(\.erb)?$/i, [
+    {
+      loader: resolvedPath,
+      options: {
+        lessOptions: {
+          paths: [path.resolve(__dirname, 'node_modules'), sourcePath, ...paths]
+        },
+        sourceMap: true
+      }
     }
-  }
-])
+  ])
+)

data/package/rules/raw.js

@@ -0,0 +1,5 @@
+module.exports = {
+  test: [/\.html$/],
+  exclude: [/\.(js|mjs|jsx|ts|tsx)$/],
+  type: 'asset/source'
+}