webpacker 5.4.2 → 6.0.0.beta

data/package/environments/production.js

@@ -1,77 +1,72 @@
-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')
+const { moduleExists } = require('../utils/helpers')
 
-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)$/
+    })
+  }
 
-    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)$/
-        })
-      )
-    }
+  return [compressionPlugin]
+}
 
-    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: [
+      () => {
+        if (
+          moduleExists('css-loader') &&
+          moduleExists('css-minimizer-webpack-plugin')
+        ) {
+          const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+          return new CssMinimizerPlugin({ sourceMap: 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
-              }
-            }
-          })
-        ]
-      }
-    })
+        return false
+      },
+
+      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
+          }
+        }
+      })
+    ].filter(Boolean)
   }
 }
+
+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

@@ -1,24 +1,29 @@
 /* eslint global-require: 0 */
 /* eslint import/no-dynamic-require: 0 */
 
+const { merge } = require('webpack-merge')
 const { resolve } = require('path')
 const { existsSync } = require('fs')
-const Environment = require('./environments/base')
-const loaders = require('./rules')
+const baseConfig = require('./environments/base')
+const rules = require('./rules')
 const config = require('./config')
 const devServer = require('./dev_server')
 const { nodeEnv } = require('./env')
+const { moduleExists, canProcess } = require('./utils/helpers')
 
-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,
-  loaders
+  webpackConfig: webpackConfig(),
+  baseConfig,
+  rules,
+  merge,
+  moduleExists,
+  canProcess
 }

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 @@
+const { canProcess } = require('../utils/helpers')
+
+module.exports = canProcess('coffee-loader', (resolvedPath) => ({
+  test: /\.coffee(\.erb)?$/,
+  use: [{ loader: resolvedPath }]
+}))

data/package/rules/erb.js

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

data/package/rules/file.js

@@ -1,21 +1,21 @@
-const { join, normalize } = 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(normalize(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,17 @@
-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 rules = {
+  file: require('./file'),
+  svg: require('./svg'),
+  css: require('./css'),
+  sass: require('./sass'),
+  babel: require('./babel'),
+  erb: require('./erb'),
+  coffee: require('./coffee'),
+  less: require('./less')
 }
+
+module.exports = Object.keys(rules)
+  .filter((key) => !!rules[key])
+  .map((key) => rules[key])

data/package/rules/less.js

@@ -0,0 +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 = 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/sass.js

@@ -1,17 +1,17 @@
 /* eslint global-require: 0 */
 
 const getStyleRule = require('../utils/get_style_rule')
+const { canProcess } = require('../utils/helpers')
 const { additional_paths: includePaths } = require('../config')
 
-module.exports = getStyleRule(/\.(scss|sass)(\.erb)?$/i, false, [
-  {
-    loader: 'sass-loader',
-    options: {
-      sourceMap: true,
-      implementation: require('sass'),
-      sassOptions: {
-        includePaths
+module.exports = canProcess('sass-loader', (resolvedPath) =>
+  getStyleRule(/\.(scss|sass)(\.erb)?$/i, [
+    {
+      loader: resolvedPath,
+      options: {
+        sassOptions: { includePaths },
+        implementation: require('sass')
       }
     }
-  }
-])
+  ])
+)

data/package/rules/svg.js

@@ -0,0 +1,20 @@
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
+const { moduleExists } = require('../utils/helpers')
+
+module.exports = {
+  test: /\.svg$/i,
+  type: 'asset/inline',
+  generator: {
+    dataUrl: (content) => {
+      let optimisedContent = content
+
+      if (moduleExists('mini-svg-data-uri')) {
+        const svgToMiniDataURI = require('mini-svg-data-uri')
+        optimisedContent = svgToMiniDataURI(content.toString())
+      }
+
+      return optimisedContent
+    }
+  }
+}

data/package/utils/get_style_rule.js

@@ -1,45 +1,35 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const { resolve } = require('path')
-const config = require('../config')
+/* eslint global-require: 0 */
 
-const styleLoader = {
-  loader: 'style-loader'
-}
+const { canProcess, moduleExists } = require('./helpers')
 
-const getStyleRule = (test, modules = false, preprocessors = []) => {
-  const use = [
-    {
-      loader: 'css-loader',
-      options: {
-        sourceMap: true,
-        importLoaders: 2,
-        modules: modules ? {
-          localIdentName: '[name]__[local]___[hash:base64:5]'
-        } : false
-      }
-    },
-    {
-      loader: 'postcss-loader',
-      options: {
-        config: { path: resolve() },
-        sourceMap: true
-      }
-    },
-    ...preprocessors
-  ]
+const getStyleRule = (test, preprocessors = []) => {
+  if (moduleExists('css-loader')) {
+    const tryPostcss = () =>
+      canProcess('postcss-loader', (loaderPath) => ({
+        loader: loaderPath,
+        options: { sourceMap: true }
+      }))
 
-  const options = modules ? { include: /\.module\.[a-z]+$/ } : { exclude: /\.module\.[a-z]+$/ }
+    const use = [
+      { loader: require('mini-css-extract-plugin').loader },
+      {
+        loader: require.resolve('css-loader'),
+        options: {
+          sourceMap: true,
+          importLoaders: 2
+        }
+      },
+      tryPostcss(),
+      ...preprocessors
+    ].filter(Boolean)
 
-  if (config.extract_css) {
-    use.unshift(MiniCssExtractPlugin.loader)
-  } else {
-    use.unshift(styleLoader)
+    return {
+      test,
+      use
+    }
   }
 
-  // sideEffects - See https://github.com/webpack/webpack/issues/6571
-  return {
-    test, use, sideEffects: !modules, ...options
-  }
+  return null
 }
 
 module.exports = getStyleRule