Upgrade assets plugin and make things work

.node-version

@@ -1 +1 @@
-10.17.0
+10.22.1

lib/install/template.rb

@@ -39,7 +39,7 @@
   end
 
   say "Installing dev server for live reloading"
-  run "yarn add --dev webpack-dev-server"
+  run "yarn add --dev webpack-dev-server @webpack-cli/serve"
 end
 
 insert_into_file Rails.root.join("package.json").to_s, before: /\n}\n*$/ do

package.json

@@ -8,7 +8,7 @@
     "lib/install/config/webpacker.yml"
   ],
   "engines": {
-    "node": ">=10.17.0 || ^12 || >=14",
+    "node": ">=10.22.1 || ^12 || >=14",
     "yarn": ">=1 <2"
   },
   "dependencies": {

package/config.js

@@ -2,7 +2,7 @@ const { resolve } = require('path')
 const { safeLoad } = require('js-yaml')
 const { readFileSync } = require('fs')
 const { merge } = require('webpack-merge')
-const { isArray, ensureTrailingSlash } = require('./utils/helpers')
+const { ensureTrailingSlash } = require('./utils/helpers')
 const { railsEnv } = require('./env')
 const configPath = require('./configPath')
 
@@ -16,14 +16,6 @@ const getDefaultConfig = () => {
 const defaults = getDefaultConfig()
 const app = safeLoad(readFileSync(configPath), 'utf8')[railsEnv]
 
-if (isArray(app.extensions) && app.extensions.length) delete defaults.extensions
-if (
-  isArray(app.static_assets_extensions) &&
-  app.static_assets_extensions.length
-) {
-  delete defaults.static_assets_extensions
-}
-
 const config = merge(defaults, app)
 config.outputPath = resolve(config.public_root_path, config.public_output_path)
 

package/environments/base.js

@@ -56,13 +56,14 @@ const getPlugins = () => {
     new WebpackAssetsManifest({
       entrypoints: true,
       writeToDisk: true,
+      output: 'manifest.json',
       publicPath: config.publicPathWithoutCDN
     })
   ]
 
   try {
     if (require.resolve('css-loader')) {
-      const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+      const MiniCssExtractPlugin = require.resolve('mini-css-extract-plugin')
       plugins.push(
         new MiniCssExtractPlugin({
           filename: 'css/[name]-[contenthash:8].css',
@@ -86,34 +87,31 @@ module.exports = {
   },
   entry: getEntryObject(),
   resolve: {
-    extensions: config.extensions,
+    extensions: ['.js', '.mjs', '.ts'],
     modules: getModulePaths()
   },
 
   plugins: getPlugins(),
 
-  optimization: {
-    splitChunks: {
-      chunks: 'all',
-      name: true
-    },
-    runtimeChunk: 'single'
-  },
   resolveLoader: {
     modules: ['node_modules'],
     plugins: [PnpWebpackPlugin.moduleLoader(module)]
   },
 
+  optimization: {
+    splitChunks: {
+      chunks: 'all'
+    },
+    // Keep the runtime chunk separated to enable long term caching
+    // https://twitter.com/wSokra/status/969679223278505985
+    // https://github.com/facebook/create-react-app/issues/5358
+    runtimeChunk: {
+      name: (entrypoint) => `runtime-${entrypoint.name}`
+    }
+  },
+
   module: {
     strictExportPresence: true,
     rules
-  },
-
-  node: {
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty'
   }
 }

package/environments/production.js

@@ -38,6 +38,8 @@ const getPlugins = () => {
       )
     }
   } catch (e) {}
+
+  return plugins
 }
 
 const productionConfig = {
@@ -49,8 +51,6 @@ const productionConfig = {
     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

package/rules/module.sass.js

@@ -1,12 +1,11 @@
-const sass = require('sass')
 const getStyleRule = require('../utils/get_style_rule')
 
 module.exports = getStyleRule(/\.(scss|sass)$/i, true, [
   {
     loader: 'sass-loader',
     options: {
       sourceMap: true,
-      implementation: sass
+      implementation: require.resolve('sass')
     }
   }
 ])

package/rules/sass.js

@@ -1,4 +1,3 @@
-const sass = require('sass')
 const getStyleRule = require('../utils/get_style_rule')
 const { additional_paths: includePaths } = require('../config')
 
@@ -9,7 +8,7 @@ module.exports = getStyleRule(/\.(scss|sass)(\.erb)?$/i, [
       sassOptions: {
         includePaths
       },
-      implementation: sass
+      implementation: require.resolve('sass')
     }
   }
 ])

package/rules/svg.js

@@ -1,12 +1,10 @@
-const svgToMiniDataURI = require('mini-svg-data-uri')
-
 module.exports = {
   test: /\.svg$/i,
   use: [
     {
       loader: require.resolve('url-loader'),
       options: {
-        generator: (content) => svgToMiniDataURI(content.toString())
+        generator: (content) => require.resolve('mini-svg-data-uri')(content.toString())
       }
     }
   ]