6 files changed, 118 insertions, 0 deletions
diff --git a/config/webpack/rules/babel.js b/config/webpack/rules/babel.js
new file mode 100644
index 000000000..4d25748ee
--- /dev/null
+++ b/config/webpack/rules/babel.js
@@ -0,0 +1,22 @@
+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: {
+        sourceRoot: 'app/javascript',
+        cacheDirectory: join(settings.cache_path, 'babel-loader'),
+        cacheCompression: env.NODE_ENV === 'production',
+        compact: env.NODE_ENV === 'production',
+      },
+    },
+  ],
+};
diff --git a/config/webpack/rules/css.js b/config/webpack/rules/css.js
new file mode 100644
index 000000000..9553cb55b
--- /dev/null
+++ b/config/webpack/rules/css.js
@@ -0,0 +1,31 @@
+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: {
+        includePaths: ['app/javascript'],
+        fiber: require('fibers'),
+        implementation: require('sass'),
+        sourceMap: true,
+      },
+    },
+  ],
+};
diff --git a/config/webpack/rules/file.js b/config/webpack/rules/file.js
new file mode 100644
index 000000000..f2fb58780
--- /dev/null
+++ b/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),
+      },
+    },
+  ],
+};
diff --git a/config/webpack/rules/index.js b/config/webpack/rules/index.js
new file mode 100644
index 000000000..bbf6b0187
--- /dev/null
+++ b/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,
+};
diff --git a/config/webpack/rules/mark.js b/config/webpack/rules/mark.js
new file mode 100644
index 000000000..e62a526b0
--- /dev/null
+++ b/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',
+  };
+}
diff --git a/config/webpack/rules/node_modules.js b/config/webpack/rules/node_modules.js
new file mode 100644
index 000000000..7ed05504b
--- /dev/null
+++ b/config/webpack/rules/node_modules.js
@@ -0,0 +1,23 @@
+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,
+        plugins: [
+          'transform-react-remove-prop-types',
+        ],
+        cacheDirectory: join(settings.cache_path, 'babel-loader-node-modules'),
+        cacheCompression: env.NODE_ENV === 'production',
+        compact: false,
+        sourceMaps: false,
+      },
+    },
+  ],
+};