Add per-environment webpack configs

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"
   }

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(),
+  ],
+}

webpack.config.js

@@ -1,44 +1,6 @@
-const path = require('path');
+const { merge } = require('webpack-merge');
-const process = require('process');
+const common = require('./webpack.common.js');
-const CopyPlugin = require("copy-webpack-plugin");
+module.exports = merge(
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+  common,
-
+  {mode: "development", devtool: "inline-source-map"},
-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(),
-  ],
-}

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')}
+  }
+)

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')}
+  }
+)