Install shakapacker

bin/webpacker → bin/shakapacker

@@ -7,10 +7,10 @@ require "bundler/setup"
 
 # Add the Decidim override load path to override webpacker functionality
 $LOAD_PATH.unshift "#{Gem.loaded_specs["decidim-core"].full_gem_path}/lib/gem_overrides"
-require "webpacker"
-require "webpacker/webpack_runner"
+require "shakapacker"
+require "shakapacker/webpack_runner"
 
 APP_ROOT = File.expand_path("..", __dir__)
 Dir.chdir(APP_ROOT) do
-  Webpacker::WebpackRunner.run(ARGV)
+  Shakapacker::WebpackRunner.run(ARGV)
 end

bin/webpacker-dev-server → bin/shakapacker-dev-server

@@ -7,10 +7,10 @@ require "bundler/setup"
 
 # Add the Decidim override load path to override webpacker functionality
 $LOAD_PATH.unshift "#{Gem.loaded_specs["decidim-core"].full_gem_path}/lib/gem_overrides"
-require "webpacker"
-require "webpacker/dev_server_runner"
+require "shakapacker"
+require "shakapacker/dev_server_runner"
 
 APP_ROOT = File.expand_path("..", __dir__)
 Dir.chdir(APP_ROOT) do
-  Webpacker::DevServerRunner.run(ARGV)
+  Shakapacker::DevServerRunner.run(ARGV)
 end

config/webpacker.yml → config/shakapacker.yml

@@ -4,11 +4,15 @@
 default: &default
   source_path: app/packs
   source_entry_path: entrypoints
-  public_output_path: decidim-packs
+  nested_entries: true
+  css_extract_ignore_order_warnings: false
+
   public_root_path: public
+  public_output_path: decidim-packs
+  cache_path: tmp/shakapacker
   webpack_compile_output: true
-  cache_path: tmp/webpacker-cache
   extract_css: true
+  shakapacker_precompile: true
 
   additional_paths:
     - node_modules
@@ -17,9 +21,24 @@ default: &default
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
 
+  # Select loader to use, available options are 'babel' (default), 'swc' or 'esbuild'
+  webpack_loader: 'babel'
+
+  # Set to true to enable check for matching versions of shakapacker gem and NPM package - will raise an error if there is a mismatch or wildcard versioning is used
+  ensure_consistent_versioning: true
+
+  # Select whether the compiler will use SHA digest ('digest' option) or most most recent modified timestamp ('mtime') to determine freshness
+  compiler_strategy: digest
+
+  # Select whether the compiler will always use a content hash and not just in production
+  # Do not use contentHash except for production for performance
+  # https://webpack.js.org/guides/build-performance/#avoid-production-specific-tooling
+  useContentHash: false
+
 development:
   <<: *default
   compile: true
+  compiler_strategy: mtime
   # Compile test packs to decidim decidim-packs folder
 
   # Reference: https://webpack.js.org/configuration/dev-server/
@@ -31,9 +50,11 @@ development:
     port: 3035
     # Hot Module Replacement updates modules while the application is running without a full reload
     hmr: false
+    # mini-css-extract-plugin is a required dependency in both cases.
+    inline_css: true
     client:
       # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
-      overlay: true
+      overlay: false
       # May also be a string
       # webSocketURL:
       #  hostname: "0.0.0.0"
@@ -61,5 +82,8 @@ production:
   # Production depends on precompilation of packs prior to booting for performance.
   compile: false
 
+  # Use content hash for naming assets. Cannot be overridden by for production.
+  useContentHash: true
+
   # Cache manifest.json for performance
   cache_manifest: true

config/webpack/custom.js

@@ -1,6 +1,7 @@
 /* eslint-disable */
 const { config } = require("shakapacker");
 const { InjectManifest } = require("workbox-webpack-plugin");
+const TerserPlugin = require('terser-webpack-plugin')
 
 module.exports = {
   module: {
@@ -83,7 +84,29 @@ module.exports = {
   // https://github.com/rails/webpacker/issues/2932
   // As Decidim uses multiple packs, we need to enforce a single runtime, to prevent duplication
   optimization: {
-    runtimeChunk: false
+    minimizer: [
+      new TerserPlugin({
+        parallel: Number.parseInt(process.env.SHAKAPACKER_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)
   },
   entry: config.entrypoints,
   plugins: [

config/webpack/webpack.config.js

@@ -4,4 +4,7 @@ process.env.NODE_ENV ??= "development"
 const { webpackConfig, merge } = require("@decidim/webpacker")
 const customConfig = require("./custom")
 
-module.exports = merge(webpackConfig, customConfig)
+webpackConfig.optimization = {}
+const combinedConfig = merge(webpackConfig, customConfig)
+
+module.exports = combinedConfig