From 47170706e3b7372167b12d2e12e16fbb5aab84f5 Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Fri, 5 Apr 2024 15:23:49 -0300
Subject: [PATCH] Add per-environment webpack configs

---
 package.json           |  3 ++-
 webpack.common.js      | 42 +++++++++++++++++++++++++++++++++++
 webpack.config.js      | 50 +++++-------------------------------------
 webpack.development.js | 11 ++++++++++
 webpack.production.js  | 10 +++++++++
 5 files changed, 71 insertions(+), 45 deletions(-)
 create mode 100644 webpack.common.js
 create mode 100644 webpack.development.js
 create mode 100644 webpack.production.js

diff --git a/package.json b/package.json
index 5812cc9..456c413 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,8 @@
     "webpack-merge": "^5.10.0"
   },
   "scripts": {
-    "build": "npm exec webpack",
+    "build:production": "npm exec webpack -- --config webpack.production.js",
+    "build:development": "npm exec webpack -- --config webpack.development.js",
     "test": "npm exec jest -- test",
     "format": "npm exec prettier -- -w src/js"
   }
diff --git a/webpack.common.js b/webpack.common.js
new file mode 100644
index 0000000..3836d98
--- /dev/null
+++ b/webpack.common.js
@@ -0,0 +1,42 @@
+const path = require('path');
+const process = require('process');
+const CopyPlugin = require("copy-webpack-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+
+module.exports = {
+ entry: {
+    index: './src/js/index.tsx',
+  },
+  output: {
+    filename: 'js/[name].js',
+    path: path.resolve(__dirname, 'build')
+  },
+  resolve: {
+    alias: { '~': [path.resolve('src/js/')] },
+    roots: [path.resolve('src/js'), path.resolve('node_modules')],
+    modules: [path.resolve('src/js'), path.resolve('node_modules')],
+    extensions: ['.ts', '.tsx']
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  plugins: [
+    new CopyPlugin({
+      patterns: [
+        { from: "src/html/", to: "html" },
+        { from: "src/css/", to: "css" },
+        { from: "src/manifest.json", to: "manifest.json" },
+        { from: "src/images", to: "images/" },
+        { from: "src/_locales", to: "_locales/" },
+        { from: "src/fonts", to: "fonts/" }
+      ],
+    }),
+    new CleanWebpackPlugin(),
+  ],
+}
diff --git a/webpack.config.js b/webpack.config.js
index 7e350d8..ed31a4b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,44 +1,6 @@
-const path = require('path');
-const process = require('process');
-const CopyPlugin = require("copy-webpack-plugin");
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
-
-module.exports = {
-  mode: process.env.NODE_ENV || "development",
-  devtool: "inline-source-map",
-  entry: {
-    index: './src/js/index.tsx',
-  },
-  output: {
-    filename: 'js/[name].js',
-    path: path.resolve(__dirname, 'build')
-  },
-  resolve: {
-    alias: { '~': [path.resolve('src/js/')] },
-    roots: [path.resolve('src/js'), path.resolve('node_modules')],
-    modules: [path.resolve('src/js'), path.resolve('node_modules')],
-    extensions: ['.ts', '.tsx']
-  },
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: 'ts-loader',
-        exclude: /node_modules/,
-      },
-    ],
-  },
-  plugins: [
-    new CopyPlugin({
-      patterns: [
-        { from: "src/html/", to: "html" },
-        { from: "src/css/", to: "css" },
-        { from: "src/manifest.json", to: "manifest.json" },
-        { from: "src/images", to: "images/" },
-        { from: "src/_locales", to: "_locales/" },
-        { from: "src/fonts", to: "fonts/" }
-      ],
-    }),
-    new CleanWebpackPlugin(),
-  ],
-}
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+module.exports = merge(
+  common,
+  {mode: "development", devtool: "inline-source-map"},
+)
diff --git a/webpack.development.js b/webpack.development.js
new file mode 100644
index 0000000..82c772b
--- /dev/null
+++ b/webpack.development.js
@@ -0,0 +1,11 @@
+const path = require('path');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+module.exports = merge(
+  common,
+  {
+    mode: "development",
+    devtool: "inline-source-map",
+    output: {path: path.resolve(__dirname, 'build', 'development')}
+  }
+)
diff --git a/webpack.production.js b/webpack.production.js
new file mode 100644
index 0000000..134ecdd
--- /dev/null
+++ b/webpack.production.js
@@ -0,0 +1,10 @@
+const path = require('path');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+module.exports = merge(
+  common,
+  {
+    mode: "production",
+    output: {path: path.resolve(__dirname, 'build', 'production')}
+  }
+)