Replace to shakapacker from webpacker

config/webpack/environments/base.js

@@ -0,0 +1,91 @@
+const { readFileSync } = require('fs');
+const { load } = require('js-yaml');
+const { basename, join, resolve } = require('path');
+const extname = require('path-complete-extname');
+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 themePath = resolve('config', 'themes.yml');
+const themes = load(readFileSync(themePath), 'utf8');
+
+/**
+ * @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);
+}
+
+/** @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',
+    },
+    splitChunks: {
+      cacheGroups: {
+        default: false,
+        vendors: false,
+        common: {
+          name: 'common',
+          chunks: 'all',
+          minChunks: 2,
+          minSize: 0,
+          test: /^(?!.*[\\\/]node_modules[\\\/]react-intl[\\\/]).+$/,
+        },
+      },
+    },
+  },
+  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
+        // to reduce bundle size
+        resource.request = resource.request.replace(/^history/, 'history/es');
+      },
+    ),
+  ],
+};
+
+module.exports = merge({}, baseWebpackConfig, options);

config/webpack/environments/development.js

@@ -0,0 +1,39 @@
+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/environments/production.js

@@ -0,0 +1,45 @@
+const { createHash } = require('crypto');
+const { readFileSync } = require('fs');
+const { resolve } = require('path');
+const { merge } = require('shakapacker');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const { InjectManifest } = require('workbox-webpack-plugin');
+const baseConfig = require('./base');
+
+const root = resolve(__dirname, '..', '..', '..');
+
+/** @type {import('webpack').Configuration} */
+const productionConfig = {
+  plugins: [
+    new BundleAnalyzerPlugin({ // generates report.html
+      analyzerMode: 'static',
+      openAnalyzer: false,
+      logLevel: 'silent', // do not bother Webpacker, who runs with --json and parses stdout
+    }),
+    new InjectManifest({
+      additionalManifestEntries: ['1f602.svg', 'sheet_13.png'].map((filename) => {
+        const path = resolve(root, 'public', 'emoji', filename);
+        const body = readFileSync(path);
+        const md5  = createHash('md5');
+
+        md5.update(body);
+
+        return {
+          revision: md5.digest('hex'),
+          url: `/emoji/${filename}`,
+        };
+      }),
+      exclude: [
+        /(?:base|extra)_polyfills-.*\.js$/,
+        /locale_.*\.js$/,
+        /mailer-.*\.(?:css|js)$/,
+      ],
+      include: [/\.js$/, /\.css$/],
+      maximumFileSizeToCacheInBytes: 2 * 1_024 * 1_024, // 2 MiB
+      swDest: resolve(root, 'public', 'packs', 'sw.js'),
+      swSrc: resolve(root, 'app', 'javascript', 'mastodon', 'service_worker', 'entry.js'),
+    }),
+  ],
+};
+
+module.exports = merge({}, baseConfig, productionConfig);

config/webpack/environments/test.js

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