fix webpack config

frontend/package-lock.json

@@ -1719,6 +1719,12 @@
       "integrity": "sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA==",
       "dev": true
     },
+    "@prefresh/babel-plugin": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@prefresh/babel-plugin/-/babel-plugin-0.4.0.tgz",
+      "integrity": "sha512-fFwyfIHm/B8BBY7HL4j9iJl7KFk/5yVIWE+aozRRPPxI8lRFkyXMAgUFtTSmP3/jiMA6jyOcBeYUhWsyEUynpQ==",
+      "dev": true
+    },
     "@prefresh/core": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@prefresh/core/-/core-1.3.0.tgz",
@@ -7288,7 +7294,7 @@
     },
     "ignore-walk": {
       "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.3.tgz",
+      "resolved": false,
       "integrity": "sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==",
       "dev": true,
       "requires": {

frontend/package.json

@@ -46,6 +46,7 @@
     "@babel/preset-react": "^7.12.10",
     "@formatjs/cli": "^3.0.1",
     "@mavrin/stylelint-declaration-use-css-custom-properties": "1.0.0-alpha.2",
+    "@prefresh/babel-plugin": "^0.4.0",
     "@prefresh/webpack": "^3.0.0",
     "@size-limit/file": "^4.9.1",
     "@types/classnames": "^2.2.11",

frontend/webpack.config.js

@@ -12,7 +12,7 @@ const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const babelConfig = require('./.babelrc.js');
 
 const NODE_ID = 'remark42';
-const PUBLIC_PATH = '/web';
+const PUBLIC_PATH = '/web/';
 const PORT = process.env.PORT || 9000;
 const REMARK_API_BASE_URL = process.env.REMARK_API_BASE_URL || 'http://127.0.0.1:8080';
 const DEVSERVER_BASE_PATH = process.env.DEVSERVER_BASE_PATH || 'http://127.0.0.1:9000';
@@ -78,15 +78,7 @@ module.exports = (_, { mode, analyze }) => {
     publicPath: PUBLIC_PATH,
   };
 
-  const optimization = {
-    chunkIds: 'named',
-    moduleIds: 'named',
-    splitChunks: {
-      minChunks: 3,
-    },
-  };
-
-  const getTsRule = (babelEnvConfig = {}) => {
+  const getTsRule = (babelConfig = {}) => {
     return {
       test: /\.tsx?$/,
       exclude: /node_modules/,
@@ -96,7 +88,7 @@ module.exports = (_, { mode, analyze }) => {
           options: {
             exclude,
             cacheDirectory: true,
-            ...babelEnvConfig,
+            ...babelConfig,
           },
         },
         {
@@ -178,13 +170,7 @@ module.exports = (_, { mode, analyze }) => {
     port: PORT,
     contentBase: PUBLIC_FOLDER_PATH,
     disableHostCheck: true,
-    historyApiFallback: true,
-    quiet: true,
-    inline: true,
     hot: true,
-    compress: true,
-    clientLogLevel: 'none',
-    overlay: false,
     stats: 'minimal',
     watchOptions: {
       ignored: [PUBLIC_FOLDER_PATH, path.resolve(__dirname, 'node_modules')],
@@ -196,7 +182,7 @@ module.exports = (_, { mode, analyze }) => {
   };
 
   const plugins = [
-    ...(isDev ? [new CleanWebpackPlugin(), new RefreshPlugin(), new webpack.HotModuleReplacementPlugin()] : []),
+    ...(isDev ? [new CleanWebpackPlugin(), new webpack.HotModuleReplacementPlugin(), new RefreshPlugin()] : []),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(mode),
       'process.env.REMARK_NODE': JSON.stringify(NODE_ID),
@@ -211,7 +197,6 @@ module.exports = (_, { mode, analyze }) => {
     entry,
     devtool: 'source-map',
     resolve,
-    optimization,
   };
 
   const legacyConfig = {
@@ -246,7 +231,13 @@ module.exports = (_, { mode, analyze }) => {
       chunkFilename: '[name].mjs',
     },
     module: {
-      rules: [getTsRule(babelConfig.env.modern), ...rules],
+      rules: [
+        getTsRule({
+          ...babelConfig.env.modern,
+          plugins: [...babelConfig.env.modern.plugins, ...(isDev ? ['@prefresh/babel-plugin'] : [])],
+        }),
+        ...rules,
+      ],
     },
     plugins: [
       ...plugins,
@@ -272,14 +263,6 @@ module.exports = (_, { mode, analyze }) => {
         REMARK_URL,
         minify: htmlMinifyOptions,
       }),
-      // new HtmlWebpackPlugin({
-      //   template: path.resolve(__dirname, 'templates/comments.ejs'),
-      //   filename: 'comments.html',
-      //   inject: false,
-      //   env: mode,
-      //   REMARK_URL,
-      //   minify: htmlMinifyOptions,
-      // }),
       new HtmlWebpackPlugin({
         template: path.resolve(__dirname, 'templates/last-comments.ejs'),
         filename: 'last-comments.html',
@@ -320,7 +303,12 @@ module.exports = (_, { mode, analyze }) => {
     devServer,
   };
 
+  if (isDev) {
+    return modernConfig;
+  }
+
   return [legacyConfig, modernConfig];
 };
+
 module.exports.CUSTOM_PROPERTIES_PATH = CUSTOM_PROPERTIES_PATH;
 module.exports.exclude = exclude;