webpacker 5.2.1 → 6.0.0.pre.1

data/package/environments/development.js

@@ -1,53 +1,54 @@
+const { merge } = require('webpack-merge')
 const webpack = require('webpack')
-const Base = require('./base')
+
+const baseConfig = require('./base')
 const devServer = require('../dev_server')
+
 const { outputPath: contentBase, publicPath } = require('../config')
 
-module.exports = class extends Base {
-  constructor() {
-    super()
+let devConfig = {
+  mode: 'development',
+  devtool: 'cheap-module-source-map'
+}
 
-    this.config.merge({
-      mode: 'development',
-      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 (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
-        }
-      })
+  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
     }
-  }
+  })
 }
+
+module.exports = merge(baseConfig, devConfig)

data/package/environments/production.js

@@ -1,77 +1,81 @@
-const TerserPlugin = require('terser-webpack-plugin')
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
+
+const { merge } = require('webpack-merge')
 const CompressionPlugin = require('compression-webpack-plugin')
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
-const safePostCssParser = require('postcss-safe-parser')
-const Base = require('./base')
+const TerserPlugin = require('terser-webpack-plugin')
+const baseConfig = require('./base')
 
-module.exports = class extends Base {
-  constructor() {
-    super()
+const getPlugins = () => {
+  let compressionPlugin = new CompressionPlugin({
+    filename: '[path].gz[query]',
+    algorithm: 'gzip',
+    test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
+  })
 
-    this.plugins.append(
-      'Compression',
-      new CompressionPlugin({
-        filename: '[path].gz[query]',
-        algorithm: 'gzip',
-        test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
-      })
-    )
+  if ('brotli' in process.versions) {
+    compressionPlugin = new CompressionPlugin({
+      filename: '[path].br[query]',
+      algorithm: 'brotliCompress',
+      test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
+    })
+  }
+
+  const plugins = [compressionPlugin]
 
-    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)$/
+  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 */
+  }
+
+  return plugins
+}
 
-    this.plugins.append(
-      'OptimizeCSSAssets',
-      new OptimizeCSSAssetsPlugin({
-        parser: safePostCssParser,
-        map: {
-          inline: false,
-          annotation: true
+const productionConfig = {
+  devtool: 'source-map',
+  stats: 'normal',
+  bail: true,
+  plugins: getPlugins(),
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        parallel: Number.parseInt(process.env.WEBPACKER_PARALLEL, 10) || true,
+        terserOptions: {
+          parse: {
+            // Let terser parse ecma 8 code but always output
+            // ES5 compliant code for older browsers
+            ecma: 8
+          },
+          compress: {
+            ecma: 5,
+            warnings: false,
+            comparisons: false
+          },
+          mangle: { safari10: true },
+          output: {
+            ecma: 5,
+            comments: false,
+            ascii_only: true
+          }
         }
       })
-    )
-
-    this.config.merge({
-      devtool: 'source-map',
-      stats: 'normal',
-      bail: true,
-      optimization: {
-        minimizer: [
-          new TerserPlugin({
-            parallel: Number.parseInt(process.env.WEBPACKER_PARALLEL, 10) || true,
-            cache: true,
-            sourceMap: true,
-            terserOptions: {
-              parse: {
-                // Let terser parse ecma 8 code but always output
-                // ES5 compliant code for older browsers
-                ecma: 8
-              },
-              compress: {
-                ecma: 5,
-                warnings: false,
-                comparisons: false
-              },
-              mangle: {
-                safari10: true
-              },
-              output: {
-                ecma: 5,
-                comments: false,
-                ascii_only: true
-              }
-            }
-          })
-        ]
-      }
-    })
+    ]
   }
 }
+
+module.exports = merge(baseConfig, productionConfig)

data/package/environments/test.js

@@ -1,3 +1,3 @@
-const Base = require('./base')
+const baseConfig = require('./base')
 
-module.exports = class extends Base {}
+module.exports = baseConfig

data/package/index.js

@@ -3,22 +3,22 @@
 
 const { resolve } = require('path')
 const { existsSync } = require('fs')
-const Environment = require('./environments/base')
+const baseConfig = require('./environments/base')
 const loaders = require('./rules')
 const config = require('./config')
 const devServer = require('./dev_server')
 const { nodeEnv } = require('./env')
 
-const createEnvironment = () => {
+const webpackConfig = () => {
   const path = resolve(__dirname, 'environments', `${nodeEnv}.js`)
-  const constructor = existsSync(path) ? require(path) : Environment
-  return new constructor()
+  const environmentConfig = existsSync(path) ? require(path) : baseConfig
+  return environmentConfig
 }
 
 module.exports = {
   config,
   devServer,
-  environment: createEnvironment(),
-  Environment,
+  webpackConfig: webpackConfig(),
+  baseConfig,
   loaders
 }

data/package/rules/babel.js

@@ -1,10 +1,12 @@
 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
+const {
+  source_path: sourcePath,
+  additional_paths: additionalPaths
+} = require('../config')
+const { isProduction } = require('../env')
+
 module.exports = {
   test: /\.(js|jsx|mjs|ts|tsx)?(\.erb)?$/,
   include: [sourcePath, ...additionalPaths].map((p) => {
@@ -17,11 +19,11 @@ module.exports = {
   exclude: /node_modules/,
   use: [
     {
-      loader: 'babel-loader',
+      loader: require.resolve('babel-loader'),
       options: {
         cacheDirectory: true,
-        cacheCompression: nodeEnv === 'production',
-        compact: nodeEnv === 'production'
+        cacheCompression: isProduction,
+        compact: isProduction
       }
     }
   ]

data/package/rules/coffee.js

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

data/package/rules/erb.js

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

data/package/rules/file.js

@@ -1,21 +1,21 @@
-const { join } = require('path')
-const { source_path: sourcePath, static_assets_extensions: fileExtensions } = require('../config')
-
 module.exports = {
-  test: new RegExp(`(${fileExtensions.join('|')})$`, 'i'),
-  use: [
-    {
-      loader: 'file-loader',
-      options: {
-        name(file) {
-          if (file.includes(sourcePath)) {
-            return 'media/[path][name]-[hash].[ext]'
-          }
-          return 'media/[folder]/[name]-[hash:8].[ext]'
-        },
-        esModule: false,
-        context: join(sourcePath)
-      }
-    }
-  ]
+  test: [
+    /\.bmp$/,
+    /\.gif$/,
+    /\.jpe?g$/,
+    /\.png$/,
+    /\.tiff$/,
+    /\.ico$/,
+    /\.avif$/,
+    /\.webp$/,
+    /\.eot$/,
+    /\.otf$/,
+    /\.ttf$/,
+    /\.woff$/,
+    /\.woff2$/,
+    /\.html$/,
+    /\.json$/
+  ],
+  exclude: [/\.(js|mjs|jsx|ts|tsx)$/],
+  type: 'asset/resource'
 }

data/package/rules/index.js

@@ -1,20 +1,26 @@
-const babel = require('./babel')
-const file = require('./file')
-const css = require('./css')
-const sass = require('./sass')
-const moduleCss = require('./module.css')
-const moduleSass = require('./module.sass')
-const nodeModules = require('./node_modules')
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
 
-// Webpack loaders are processed in reverse order
-// https://webpack.js.org/concepts/loaders/#loader-features
-// Lastly, process static files using file loader
-module.exports = {
-  file,
-  css,
-  sass,
-  moduleCss,
-  moduleSass,
-  nodeModules,
-  babel
+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')
+}
+
+module.exports = Object.keys(rules)
+  .filter((key) => !!rules[key])
+  .map((key) => rules[key])

data/package/rules/less.js

@@ -0,0 +1,18 @@
+const path = require('path')
+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
+    }
+  }
+])

data/package/rules/sass.js

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