Bump webpacker from 3.5.5 to 4.0.2 (#10277)

Bumps [webpacker](https://github.com/rails/webpacker) from 3.5.5 to 4.0.2.
- [Release notes](https://github.com/rails/webpacker/releases)
- [Changelog](https://github.com/rails/webpacker/blob/master/CHANGELOG.md)
- [Commits](https://github.com/rails/webpacker/compare/v3.5.5...v4.0.2)

Signed-off-by: dependabot[bot] <support@dependabot.com>
Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>

config/webpack/rules/babel.js

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,30 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  test: /\.s?css$/i,
+  use: [
+    MiniCssExtractPlugin.loader,
+    {
+      loader: 'css-loader',
+      options: {
+        sourceMap: true,
+        importLoaders: 2,
+        localIdentName: '[name]__[local]___[hash:base64:5]',
+      },
+    },
+    {
+      loader: 'postcss-loader',
+      options: {
+        sourceMap: true,
+      },
+    },
+    {
+      loader: 'sass-loader',
+      options: {
+        fiber: require('fibers'),
+        implementation: require('sass'),
+        sourceMap: true,
+      },
+    },
+  ],
+};

config/webpack/rules/file.js

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,14 @@
+const babel = require('./babel');
+const css = require('./css');
+const file = require('./file');
+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,
+  css,
+  nodeModules,
+  babel,
+};

config/webpack/rules/mark.js

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

config/webpack/rules/node_modules.js

@@ -0,0 +1,26 @@
+const { join } = require('path');
+const { settings, env } = require('../configuration');
+
+module.exports = {
+  test: /\.(js|mjs)$/,
+  include: /node_modules/,
+  exclude: /@babel(?:\/|\\{1,2})runtime/,
+  use: [
+    {
+      loader: 'babel-loader',
+      options: {
+        babelrc: false,
+        presets: [
+          ['@babel/env', { modules: false }],
+        ],
+        plugins: [
+          'transform-react-remove-prop-types',
+        ],
+        cacheDirectory: join(settings.cache_path, 'babel-loader-node-modules'),
+        cacheCompression: env.NODE_ENV === 'production',
+        compact: false,
+        sourceMaps: false,
+      },
+    },
+  ],
+};