Replace to shakapacker from webpacker

config/webpack/env.js

+const { config, env } = require('shakapacker');
+
+module.exports = {
+  NODE_ENV: env.nodeEnv,
+  PUBLIC_OUTPUT_PATH: config.public_output_path,
+};

config/webpack/shared.js → config/webpack/environments/base.js

-// Note: You must restart bin/webpack-dev-server for changes to take effect
-
-const webpack = require('webpack');
-const { basename, dirname, join, relative, resolve } = require('path');
-const { sync } = require('glob');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const AssetsManifestPlugin = require('webpack-assets-manifest');
+const { readFileSync } = require('fs');
+const { load } = require('js-yaml');
+const { basename, join, resolve } = require('path');
 const extname = require('path-complete-extname');
-const { env, settings, themes, output } = require('./configuration');
-const rules = require('./rules');
-const localePackPaths = require('./generateLocalePacks');
+const { config, merge, webpackConfig: originalBaseWebpackConfig } = require('shakapacker');
+const webpack = require('webpack');
+const WebpackAssetsManifest = require('webpack-assets-manifest');
+const env = require('../env');
+const nodeModulesRule = require('../rules/node_modules');
+const tesseractRule = require('../rules/tesseract');
+const localePackPaths = require('../generateLocalePacks');
 
-const extensionGlob = `**/*{${settings.extensions.join(',')}}*`;
-const entryPath = join(settings.source_path, settings.source_entry_path);
-const packPaths = sync(join(entryPath, extensionGlob));
+const themePath = resolve('config', 'themes.yml');
+const themes = load(readFileSync(themePath), 'utf8');
 
-module.exports = {
-  entry: Object.assign(
-    packPaths.reduce((map, entry) => {
-      const localMap = map;
-      const namespace = relative(join(entryPath), dirname(entry));
-      localMap[join(namespace, basename(entry, extname(entry)))] = resolve(entry);
-      return localMap;
-    }, {}),
-    localePackPaths.reduce((map, entry) => {
-      const localMap = map;
-      localMap[basename(entry, extname(entry, extname(entry)))] = resolve(entry);
-      return localMap;
-    }, {}),
-    Object.keys(themes).reduce((themePaths, name) => {
-      themePaths[name] = resolve(join(settings.source_path, themes[name]));
-      return themePaths;
-    }, {}),
-  ),
+/**
+ * @param {import('webpack').WebpackPluginInstance | ((this: webpack.Compiler, compiler: webpack.Compiler) => void)} plugin
+ * @returns {boolean}
+ */
+function isAllowedPlugin(plugin) {
+  return !(plugin instanceof WebpackAssetsManifest || plugin instanceof webpack.EnvironmentPlugin);
+}
 
-  output: {
-    filename: 'js/[name]-[chunkhash].js',
-    chunkFilename: 'js/[name]-[chunkhash].chunk.js',
-    hotUpdateChunkFilename: 'js/[id]-[hash].hot-update.js',
-    hashFunction: 'sha256',
-    path: output.path,
-    publicPath: output.publicPath,
-  },
+/** @type {import('webpack').Configuration} */
+const baseWebpackConfig = {
+  ...originalBaseWebpackConfig,
+  optimization: {},
+  plugins: originalBaseWebpackConfig.plugins.filter(isAllowedPlugin),
+};
 
+/** @type {import('webpack').Configuration} */
+const options = {
+  target: 'web',
+  entry: {
+    ...localePackPaths.reduce((map, entry) => ({
+      ...map,
+      [basename(entry, extname(entry, extname(entry)))]: resolve(entry),
+    }), {}),
+    ...Object.keys(themes).reduce((themePaths, name) => ({
+      ...themePaths,
+      [name]: resolve(join(config.source_path, themes[name])),
+    }), {}),
+  },
+  module: {
+    rules: [
+      nodeModulesRule,
+      tesseractRule,
+    ],
+  },
   optimization: {
+    chunkIds: 'total-size',
+    moduleIds: 'size',
     runtimeChunk: {
       name: 'common',
     },
@@ -59,15 +66,18 @@ module.exports = {
         },
       },
     },
-    occurrenceOrder: true,
   },
-
-  module: {
-    rules: Object.keys(rules).map(key => rules[key]),
-  },
-
   plugins: [
     new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
+    new WebpackAssetsManifest({
+      entrypoints: true,
+      entrypointsUseAssets: true,
+      integrity: true,
+      integrityHashes: ['sha256'],
+      output: config.manifestPath,
+      publicPath: true,
+      writeToDisk: true,
+    }),
     new webpack.NormalModuleReplacementPlugin(
       /^history\//, (resource) => {
         // temporary fix for https://github.com/ReactTraining/react-router/issues/5576
@@ -75,34 +85,7 @@ module.exports = {
         resource.request = resource.request.replace(/^history/, 'history/es');
       },
     ),
-    new MiniCssExtractPlugin({
-      filename: 'css/[name]-[contenthash:8].css',
-      chunkFilename: 'css/[name]-[contenthash:8].chunk.css',
-    }),
-    new AssetsManifestPlugin({
-      integrity: true,
-      integrityHashes: ['sha256'],
-      entrypoints: true,
-      writeToDisk: true,
-      publicPath: true,
-    }),
   ],
-
-  resolve: {
-    extensions: settings.extensions,
-    modules: [
-      resolve(settings.source_path),
-      'node_modules',
-    ],
-  },
-
-  resolveLoader: {
-    modules: ['node_modules'],
-  },
-
-  node: {
-    // Called by http-link-header in an API we never use, increases
-    // bundle size unnecessarily
-    Buffer: false,
-  },
 };
+
+module.exports = merge({}, baseWebpackConfig, options);

config/webpack/environments/development.js

+const { env, merge } = require('shakapacker');
+const markRule = require('../rules/mark');
+const baseConfig = require('./base');
+
+/** @type {import('webpack').Configuration} */
+let developmentConfig = {
+  module: {
+    rules: [
+      markRule,
+    ],
+  },
+};
+
+if (env.runningWebpackDevServer) {
+  developmentConfig = merge(developmentConfig, {
+    devServer: {
+      devMiddleware: {
+        writeToDisk: filePath => /ocr/.test(filePath),
+      },
+    },
+  });
+}
+
+if (process.env.VAGRANT) {
+  developmentConfig = merge(developmentConfig, {
+    devServer: {
+      static: {
+        watch: {
+          // If we are in Vagrant, we can't rely on inotify to update us with changed
+          // files, so we must poll instead. Here, we poll every second to see if
+          // anything has changed.
+          poll: 1_000,
+        },
+      },
+    },
+  });
+}
+
+module.exports = merge({}, baseConfig, developmentConfig);

config/webpack/production.js → config/webpack/environments/production.js

-// Note: You must restart bin/webpack-dev-server for changes to take effect
-
 const { createHash } = require('crypto');
 const { readFileSync } = require('fs');
 const { resolve } = require('path');
-const { merge } = require('webpack-merge');
+const { merge } = require('shakapacker');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const TerserPlugin = require('terser-webpack-plugin');
-const CompressionPlugin = require('compression-webpack-plugin');
 const { InjectManifest } = require('workbox-webpack-plugin');
-const sharedConfig = require('./shared');
-
-const root = resolve(__dirname, '..', '..');
+const baseConfig = require('./base');
 
-module.exports = merge(sharedConfig, {
-  mode: 'production',
-  devtool: 'source-map',
-  stats: 'normal',
-  bail: true,
-  optimization: {
-    minimize: true,
-    minimizer: [
-      new TerserPlugin({
-        cache: true,
-        parallel: true,
-        sourceMap: true,
-      }),
-    ],
-  },
+const root = resolve(__dirname, '..', '..', '..');
 
+/** @type {import('webpack').Configuration} */
+const productionConfig = {
   plugins: [
-    new CompressionPlugin({
-      filename: '[path][base].gz[query]',
-      cache: true,
-      test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/,
-    }),
     new BundleAnalyzerPlugin({ // generates report.html
       analyzerMode: 'static',
       openAnalyzer: false,
@@ -63,4 +40,6 @@ module.exports = merge(sharedConfig, {
       swSrc: resolve(root, 'app', 'javascript', 'mastodon', 'service_worker', 'entry.js'),
     }),
   ],
-});
+};
+
+module.exports = merge({}, baseConfig, productionConfig);

config/webpack/environments/test.js

+const { merge } = require('shakapacker');
+const baseConfig = require('./base');
+
+/** @type {import('webpack').Configuration} */
+const testConfig = {
+  mode: 'development',
+};
+
+module.exports = merge({}, baseConfig, testConfig);

config/webpack/rules/babel.js

-const { join, resolve } = require('path');
-const { env, settings } = require('../configuration');
-
-module.exports = {
-  test: /\.(js|jsx|mjs)$/,
-  include: [
-    settings.source_path,
-    ...settings.resolved_paths,
-  ].map(p => resolve(p)),
-  exclude: /node_modules/,
-  use: [
-    {
-      loader: 'babel-loader',
-      options: {
-        cacheDirectory: join(settings.cache_path, 'babel-loader'),
-        cacheCompression: env.NODE_ENV === 'production',
-        compact: env.NODE_ENV === 'production',
-      },
-    },
-  ],
-};

config/webpack/rules/css.js

-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-module.exports = {
-  test: /\.s?css$/i,
-  use: [
-    MiniCssExtractPlugin.loader,
-    {
-      loader: 'css-loader',
-      options: {
-        sourceMap: true,
-        importLoaders: 2,
-      },
-    },
-    {
-      loader: 'postcss-loader',
-      options: {
-        sourceMap: true,
-      },
-    },
-    {
-      loader: 'sass-loader',
-      options: {
-        implementation: require('sass'),
-        sourceMap: true,
-      },
-    },
-  ],
-};

config/webpack/rules/file.js

-const { join } = require('path');
-const { settings } = require('../configuration');
-
-module.exports = {
-  test: new RegExp(`(${settings.static_assets_extensions.join('|')})$`, 'i'),
-  use: [
-    {
-      loader: 'file-loader',
-      options: {
-        name(file) {
-          if (file.includes(settings.source_path)) {
-            return 'media/[path][name]-[hash].[ext]';
-          }
-          return 'media/[folder]/[name]-[hash:8].[ext]';
-        },
-        context: join(settings.source_path),
-      },
-    },
-  ],
-};

config/webpack/rules/index.js

-const babel = require('./babel');
-const css = require('./css');
-const file = require('./file');
-const tesseract = require('./tesseract');
-const nodeModules = require('./node_modules');
-
-// 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,
-  tesseract,
-  css,
-  nodeModules,
-  babel,
-};

config/webpack/rules/mark.js

-if (process.env.NODE_ENV === 'production') {
-  module.exports = {};
-} else {
-  module.exports = {
-    test: /\.js$/,
-    loader: 'mark-loader',
-  };
-}
+module.exports = {
+  test: /\.js$/,
+  loader: 'mark-loader',
+};

config/webpack/rules/node_modules.js

 const { join } = require('path');
-const { settings, env } = require('../configuration');
+const { config, env } = require('shakapacker');
 
 module.exports = {
   test: /\.(js|mjs)$/,
@@ -16,8 +16,8 @@ module.exports = {
         plugins: [
           'transform-react-remove-prop-types',
         ],
-        cacheDirectory: join(settings.cache_path, 'babel-loader-node-modules'),
-        cacheCompression: env.NODE_ENV === 'production',
+        cacheDirectory: join(config.cache_path, 'babel-loader-node-modules'),
+        cacheCompression: env.isProduction,
         compact: false,
         sourceMaps: false,
       },

config/webpack/rules/tesseract.js

 module.exports = {
+  generator: {
+    filename: 'ocr/[name]-[hash][ext]',
+  },
   test: [
     /tesseract\.js\/dist\/worker\.min\.js$/,
     /tesseract\.js\/dist\/worker\.min\.js.map$/,
     /tesseract\.js-core\/tesseract-core\.wasm$/,
     /tesseract\.js-core\/tesseract-core\.wasm.js$/,
   ],
-  use: {
-    loader: 'file-loader',
-    options: {
-      name: 'ocr/[name]-[hash].[ext]',
-    },
-  },
+  type: 'asset/resource',
 };

config/webpack/tests.js

-// Note: You must restart bin/webpack-dev-server for changes to take effect
-
-const { merge } = require('webpack-merge');
-const sharedConfig = require('./shared');
-
-module.exports = merge(sharedConfig, {
-  mode: 'development',
-});

config/webpack/webpack.config.js

+const { existsSync } = require('fs');
+const { resolve } = require('path');
+const { env } = require('shakapacker');
+const baseConfig = require('./environments/base');
+
+function getWebpackConfig() {
+  const { nodeEnv } = env;
+  const path = resolve(__dirname, 'environments', `${nodeEnv}.js`);
+  const enviromentConfig = existsSync(path) ? require(path) : baseConfig;
+
+  return enviromentConfig;
+}
+
+module.exports = getWebpackConfig();

config/webpacker.yml

-# Note: You must restart bin/webpack-dev-server for changes to take effect
+# Note: You must restart bin/webpacker-dev-server for changes to take effect
 
 default: &default
   source_path: app/javascript
-  source_entry_path: packs
+  source_entry_path: /
   public_root_path: public
   public_output_path: packs
-  cache_path: tmp/cache/webpacker
-  check_yarn_integrity: false
-  webpack_compile_output: false
+  cache_path: tmp/webpacker
+  webpack_compile_output: true
 
-  # Additional paths webpack should lookup modules
+  # Location for manifest.json, defaults to {public_output_path}/manifest.json if unset
+  # manifest_path: public/packs/manifest.json
+
+  # Additional paths webpack should look up modules
   # ['app/assets', 'engine/foo/app/assets']
-  resolved_paths: []
+  additional_paths: []
 
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
 
-  # Extract and emit a css file
-  extract_css: true
-
-  static_assets_extensions:
-    - .jpg
-    - .jpeg
-    - .png
-    - .tiff
-    - .ico
-    - .svg
-    - .eot
-    - .otf
-    - .ttf
-    - .woff
-    - .woff2
+  # Select loader to use, available options are 'babel' (default), 'swc' or 'esbuild'
+  webpack_loader: 'babel'
 
-  extensions:
-    - .mjs
-    - .js
-    - .sass
-    - .scss
-    - .css
-    - .module.sass
-    - .module.scss
-    - .module.css
-    - .png
-    - .svg
-    - .gif
-    - .jpeg
-    - .jpg
+  # 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: false
 
 development:
   <<: *default
-
   compile: true
 
   # Reference: https://webpack.js.org/configuration/dev-server/
@@ -57,23 +33,39 @@ development:
     https: false
     host: localhost
     port: 3035
-    public: localhost:3035
+    # Hot Module Replacement updates modules while the application is running without a full reload
     hmr: false
-    # Inline should be set to true if using HMR
-    inline: true
-    overlay: true
+    # If HMR is on, CSS will by inlined by delivering it as part of the script payload via style-loader. Be sure
+    # that you add style-loader to your project dependencies.
+    #
+    # If you want to instead deliver CSS via <link> with the mini-extract-css-plugin, set inline_css to false.
+    # In that case, style-loader is not needed as a dependency.
+    #
+    # mini-extract-css-plugin is a required dependency in both cases.
+    inline_css: false
+    # Defaults to the inverse of hmr. Uncomment to manually set this.
+    # live_reload: true
+    client:
+      # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
+      overlay: true
+      # May also be a string
+      # webSocketURL:
+      #  hostname: "0.0.0.0"
+      #  pathname: "/ws"
+      #  port: 8080
+    # Should we use gzip compression?
     compress: true
-    disable_host_check: true
-    use_local_ip: false
-    quiet: false
+    # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
+    allowed_hosts: "all"
+    pretty: true
     headers:
       'Access-Control-Allow-Origin': '*'
-    watch_options:
-      ignored: '**/node_modules/**'
+    static:
+      watch:
+        ignored: '**/node_modules/**'
 
 test:
   <<: *default
-
   # CircleCI precompiles packs prior to running the tests.
   # Also avoids race conditions in parallel_tests.
   compile: false

package.json

@@ -6,8 +6,8 @@
   },
   "scripts": {
     "postversion": "git push --tags",
-    "build:development": "cross-env RAILS_ENV=development NODE_ENV=development ./bin/webpack",
-    "build:production": "cross-env RAILS_ENV=production NODE_ENV=production ./bin/webpack",
+    "build:development": "cross-env RAILS_ENV=development NODE_ENV=development ./bin/webpacker",
+    "build:production": "cross-env RAILS_ENV=production NODE_ENV=production ./bin/webpacker",
     "manage:translations": "node ./config/webpack/translationRunner.js",
     "start": "node ./streaming/index.js",
     "test": "${npm_execpath} run test:lint:js && ${npm_execpath} run test:jest",
@@ -33,10 +33,10 @@
     "@babel/runtime": "^7.19.0",
     "@gamestdio/websocket": "^0.3.2",
     "@github/webauthn-json": "^0.5.7",
-    "@rails/ujs": "^6.1.6",
+    "@rails/ujs": "^6.1.7",
     "array-includes": "^3.1.5",
     "arrow-key-navigation": "^1.2.0",
-    "autoprefixer": "^9.8.8",
+    "autoprefixer": "^10.4.8",
     "axios": "^0.27.2",
     "babel-loader": "^8.2.5",
     "babel-plugin-lodash": "^3.3.4",
@@ -47,10 +47,10 @@
     "classnames": "^2.3.1",
     "cocoon-js-vanilla": "^1.3.0",
     "color-blend": "^3.0.1",
-    "compression-webpack-plugin": "^6.1.1",
+    "compression-webpack-plugin": "^10.0.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^5.2.7",
-    "cssnano": "^4.1.11",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^3.4.1",
     "detect-passive-events": "^2.0.3",
     "dotenv": "^16.0.2",
     "emoji-mart": "npm:emoji-mart-lazyload",
@@ -58,14 +58,12 @@
     "escape-html": "^1.0.3",
     "exif-js": "^2.3.0",
     "express": "^4.18.1",
-    "file-loader": "^6.2.0",
     "font-awesome": "^4.7.0",
     "fuzzysort": "^1.9.0",
     "glob": "^8.0.3",
     "history": "^4.10.1",
     "http-link-header": "^1.0.5",
     "immutable": "^4.1.0",
-    "imports-loader": "^1.2.0",
     "intersection-observer": "^0.12.2",
     "intl": "^1.2.5",
     "intl-messageformat": "^2.2.0",
@@ -76,7 +74,7 @@
     "lodash": "^4.17.21",
     "mark-loader": "^0.1.6",
     "marky": "^1.2.5",
-    "mini-css-extract-plugin": "^1.6.2",
+    "mini-css-extract-plugin": "^2.6.1",
     "mkdirp": "^1.0.4",
     "npmlog": "^6.0.2",
     "object-assign": "^4.1.1",
@@ -85,7 +83,7 @@
     "path-complete-extname": "^1.0.0",
     "pg": "^8.5.0",
     "postcss": "^8.4.16",
-    "postcss-loader": "^3.0.0",
+    "postcss-loader": "^6.2.1",
     "postcss-object-fit-images": "^1.1.2",
     "promise.prototype.finally": "^3.1.3",
     "prop-types": "^15.8.1",
@@ -118,21 +116,21 @@
     "requestidlecallback": "^0.3.0",
     "reselect": "^4.1.6",
     "rimraf": "^3.0.2",
-    "sass": "^1.54.8",
-    "sass-loader": "^10.2.0",
+    "sass": "^1.54.9",
+    "sass-loader": "^12.6.0",
+    "shakapacker": "6.5.2",
     "stacktrace-js": "^2.0.2",
     "stringz": "^2.1.0",
     "substring-trie": "^1.0.2",
-    "terser-webpack-plugin": "^4.2.3",
     "tesseract.js": "^2.1.1",
     "throng": "^4.0.0",
     "tiny-queue": "^0.2.1",
     "twitter-text": "3.1.0",
     "uuid": "^8.3.1",
-    "webpack": "^4.46.0",
-    "webpack-assets-manifest": "^4.0.6",
+    "webpack": "^5.74.0",
+    "webpack-assets-manifest": "^5.1.0",
     "webpack-bundle-analyzer": "^4.6.1",
-    "webpack-cli": "^3.3.12",
+    "webpack-cli": "^4.10.0",
     "webpack-merge": "^5.8.0",
     "wicg-inert": "^3.1.2",
     "workbox-expiration": "^6.5.4",
@@ -162,7 +160,7 @@
     "react-test-renderer": "^16.14.0",
     "stylelint": "^14.11.0",
     "stylelint-config-standard-scss": "^5.0.0",
-    "webpack-dev-server": "^3.11.3",
+    "webpack-dev-server": "^4.11.0",
     "yargs": "^17.5.1"
   },
   "resolutions": {

postcss.config.js

-module.exports = ({ env }) => ({
+module.exports = () => ({
   plugins: {
     autoprefixer: {},
     'postcss-object-fit-images': {},
-    cssnano: env === 'production' ? {} : false,
   },
 });