Split webpack

packages/webapp/package.json

@@ -3,9 +3,9 @@
     "version": "0.2.1",
     "main": "app.jsx",
     "scripts": {
-        "start": "webpack serve",
+        "start": "webpack serve --config webpack.dev.js ",
-        "build": "webpack --mode production",
+        "build": "webpack --config webpack.prod.js",
-        "build-dev": "webpack --mode development",
+        "build-dev": "webpack --config webpack.dev.js",
         "lint": "eslint src",
         "extract": "formatjs extract",
         "compile": "formatjs compile"
@@ -21,6 +21,7 @@
         "@typescript-eslint/eslint-plugin": "^4.8.1",
         "@typescript-eslint/parser": "^4.8.1",
         "babel-loader": "^8.2.2",
+        "babel-plugin-transform-imports": "^2.0.0",
         "brotli-webpack-plugin": "^1.1.0",
         "clean-webpack-plugin": "^3.0.0",
         "copy-webpack-plugin": "^7.0.0",
@@ -40,7 +41,8 @@
         "webpack": "^5.6.0",
         "webpack-bundle-analyzer": "^4.2.0",
         "webpack-cli": "^4.2.0",
-        "webpack-dev-server": "^3.11.0"
+        "webpack-dev-server": "^3.11.0",
+        "webpack-merge": "^5.7.3"
     },
     "dependencies": {
         "@material-ui/core": "^4.11.1",

packages/webapp/webpack.common.js

@@ -1,13 +1,10 @@
 const path = require('path');
 
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 
 module.exports = {
-    mode: 'development',
-    devtool: 'eval-source-map',
     entry: {
         app: path.join(__dirname, 'src', 'index.tsx')
     },
@@ -29,7 +26,7 @@ module.exports = {
                         esModule: false,
                     }
                 }]
-            }
+            },
         ]
     },
     output: {
@@ -48,25 +45,7 @@ module.exports = {
                     ]
                 }
             }]
-        }),
-        new HtmlWebpackPlugin({
-            template: path.join(__dirname, 'public/index.html'),
-            templateParameters: {
-                PUBLIC_URL: process.env.PUBLIC_URL ? process.env.PUBLIC_URL : 'http://localhost:3000'
-            },
-            base: process.env.PUBLIC_URL ? process.env.PUBLIC_URL : 'http://localhost:3000'
         })
 
-    ],
+    ]
-    devServer: {
-        contentBase: path.join(__dirname, 'dist'),
-        compress: true,
-        port: 3000,
-        hot: true,
-        historyApiFallback: {
-            rewrites: [
-                { from: /^\/c\//, to: '/index.html' }
-            ]
-        }
-    }
 }

packages/webapp/webpack.dev.js

@@ -0,0 +1,29 @@
+const path = require('path');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'source-map',
+  devServer: {
+    contentBase: path.join(__dirname, 'dist'),
+    compress: true,
+    port: 3000,
+    hot: true,
+    historyApiFallback: {
+      rewrites: [
+        { from: /^\/c\//, to: '/index.html' }
+      ]
+    }
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, 'public/index.html'),
+      templateParameters: {
+        PUBLIC_URL: process.env.PUBLIC_URL ? process.env.PUBLIC_URL : 'http://localhost:3000'
+      },
+      base: process.env.PUBLIC_URL ? process.env.PUBLIC_URL : 'http://localhost:3000'
+    })
+  ]
+});

packages/webapp/webpack.prod.js

@@ -0,0 +1,10 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'production',
+  devtool: 'source-map',
+  optimization: {
+    minimize: true,
+  },
+});