Fix webpack dev build

frontend/package.json

@@ -3,8 +3,8 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "webpack-dev-server",
+    "start": "webpack-dev-server --mode development",
-    "build": "NODE_ENV=production webpack"
+    "build": "webpack --mode production"
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
@@ -14,6 +14,10 @@
     "luxon": "^1.28.0",
     "maplibre-gl": "^1.15.2",
     "pkce": "^1.0.0-beta2",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-loader": "^6.2.1",
+    "postcss-normalize": "^10.0.1",
+    "postcss-preset-env": "^7.0.1",
     "proj4": "^2.7.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -24,6 +28,7 @@
     "react-router-dom": "^5.3.0",
     "redux": "^4.1.2",
     "redux-localstorage": "^0.4.1",
+    "resolve-url-loader": "^4.0.0",
     "rxjs": "^6.6.7",
     "rxjs-hooks": "^0.6.2",
     "sass": "^1.43.5",

frontend/webpack.config.js

@@ -3,34 +3,140 @@ const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'
 
 const path = require('path')
 
-const isDevelopment = process.env.NODE_ENV !== 'production'
+const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'
-
-const API_URL = process.env.API_URL || 'http://localhost:3000'
-const BASE_URL = process.env.BASE_URL || isDevelopment ? 'http://localhost:3001' : '__BASE_HREF__'
-const PORT = process.env.PORT || 3001
 
 
-module.exports = {
+const resolveApp = (relativePath) => path.resolve(__dirname, relativePath)
-  entry: './src/index.js',
+const appSrc = resolveApp('src')
-  mode: isDevelopment ? 'development' : 'production',
+
-  cache: isDevelopment && {type: 'filesystem'},
+module.exports = function (webpackEnv) {
-  devtool: 'eval-cheap-module-source-map',
+  const isEnvProduction = webpackEnv === 'production'
-  output: {
+  const isEnvDevelopment = !isEnvProduction
-    path: path.resolve(__dirname, 'build'),
+
-    filename: 'bundle.js',
+  const apiUrl = process.env.API_URL || 'http://localhost:3000'
+  const baseUrl = process.env.BASE_URL || isEnvDevelopment ? 'http://localhost:3001' : '__BASE_HREF__'
+  const port = process.env.PORT || 3001
+
+
+  const getStyleLoaders = (modules, withLess) => {
+    const sourceMap = isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
+    const loaders = [
+      isEnvDevelopment && require.resolve('style-loader'),
+      isEnvProduction && {
+        loader: MiniCssExtractPlugin.loader,
+        // css is located in `static/css`, use '../../' to locate index.html folder
+        // in production `paths.publicUrlOrPath` can be a relative path
+        // options: paths.publicUrlOrPath.startsWith('.')
+        //   ? { publicPath: '../../' }
+        //   : {},
       },
-  cache: false,
+      {
+        loader: require.resolve('css-loader'),
+        options: {
+          modules,
+          importLoaders: withLess ? 2 : 1,
+          sourceMap,
+        },
+      },
+      {
+        // Options for PostCSS as we reference these options twice
+        // Adds vendor prefixing based on your specified browser support in
+        // package.json
+        loader: require.resolve('postcss-loader'),
+        options: {
+          postcssOptions: {
+            // Necessary for external CSS imports to work
+            // https://github.com/facebook/create-react-app/issues/2677
+            ident: 'postcss',
+            plugins: [
+              'postcss-flexbugs-fixes',
+              [
+                'postcss-preset-env',
+                {
+                  autoprefixer: {
+                    flexbox: 'no-2009',
+                  },
+                  stage: 3,
+                },
+              ],
+              // Adds PostCSS Normalize as the reset css with default options,
+              // so that it honors browserslist config in package.json
+              // which in turn let's users customize the target behavior as per their needs.
+              'postcss-normalize',
+            ],
+          },
+          sourceMap,
+        },
+      },
+    ].filter(Boolean)
+    if (withLess) {
+      loaders.push(
+        // {
+        //   loader: require.resolve('resolve-url-loader'),
+        //   options: {
+        //     sourceMap,
+        //     root: appSrc,
+        //   },
+        // },
+        {
+          loader: require.resolve('less-loader'),
+          options: {
+            lessOptions: {
+              math: 'always',
+            },
+            // sourceMap: true,
+          },
+        }
+      )
+    }
+    return loaders
+  }
+
+  return {
+    entry: './src/index.js',
+    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
+    cache: isEnvDevelopment && {type: 'filesystem'},
+    devtool: isEnvProduction
+      ? shouldUseSourceMap
+        ? 'source-map'
+        : false
+      : isEnvDevelopment && 'cheap-module-source-map',
+    output: {
+      // The build folder.
+      path: path.resolve(__dirname, 'build'),
+      // Add /* filename */ comments to generated require()s in the output.
+      pathinfo: isEnvDevelopment,
+      // There will be one main bundle, and one file per asynchronous chunk.
+      // In development, it does not produce real files.
+      filename: isEnvProduction ? 'static/js/[name].[contenthash:8].js' : isEnvDevelopment && 'static/js/bundle.js',
+      // There are also additional JS chunk files if you use code splitting.
+      chunkFilename: isEnvProduction
+        ? 'static/js/[name].[contenthash:8].chunk.js'
+        : isEnvDevelopment && 'static/js/[name].chunk.js',
+      assetModuleFilename: 'static/media/[name].[hash][ext]',
+      // webpack uses `publicPath` to determine where the app is being served from.
+      // It requires a trailing slash, or the file assets will get an incorrect path.
+      // We inferred the "public path" (such as / or /my-project) from homepage.
+      // publicPath: paths.publicUrlOrPath,
+      //
+      // Point sourcemap entries to original disk location (format as URL on Windows)
+      devtoolModuleFilenameTemplate: isEnvProduction
+        ? (info) => path.relative(appSrc, info.absoluteResourcePath).replace(/\\/g, '/')
+        : isEnvDevelopment && ((info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
+    },
+
     resolve: {
       extensions: ['.tsx', '.ts', '.js'],
       alias: {
         'mapbox-gl': 'maplibre-gl',
         '../../theme.config': path.resolve('./src/semantic-ui/theme.config'),
+        '../../themes/default': 'fomantic-ui-less/themes/default',
       },
       modules: ['node_modules', 'src'],
     },
     plugins: [
       new HtmlWebpackPlugin({
-      base: BASE_URL,
+        base: baseUrl,
         meta: {
           charset: 'utf-8',
           viewport: 'width=device-width, initial-scale=1',
@@ -42,10 +148,10 @@ module.exports = {
         manifest: 'public/manifest.json',
       }),
 
-    isDevelopment && new ReactRefreshWebpackPlugin(),
+      isEnvDevelopment && new ReactRefreshWebpackPlugin(),
     ].filter(Boolean),
     devServer: {
-    port: PORT,
+      port,
       hot: true,
       compress: true,
       historyApiFallback: true,
@@ -54,18 +160,19 @@ module.exports = {
         serveIndex: true,
       },
       client: {
-      webSocketURL: `ws://0.0.0.0:${PORT}/ws`,
+        webSocketURL: `ws://0.0.0.0:${port}/ws`,
       },
       proxy: {
-      '/api': API_URL,
+        '/api': apiUrl,
-      '/login': API_URL,
+        '/login': apiUrl,
       },
     },
     module: {
       rules: [
         {
           test: /\.(mjs|js|jsx|ts|tsx)$/,
-        include: path.resolve('./src'),
+          // include: path.resolve('./src'),
+          exclude: /node_modules/,
           use: {
             loader: 'babel-loader',
             options: {
@@ -77,7 +184,7 @@ module.exports = {
               inputSourceMap: true,
 
               plugins: [
-              isDevelopment && 'react-refresh/babel',
+                isEnvDevelopment && 'react-refresh/babel',
                 [
                   '@babel/plugin-transform-runtime',
                   {
@@ -91,7 +198,7 @@ module.exports = {
                 [
                   '@babel/preset-react',
                   {
-                  development: isDevelopment,
+                    development: isEnvDevelopment,
                     runtime: 'automatic',
                   },
                 ],
@@ -103,44 +210,19 @@ module.exports = {
         },
         {
           test: /\.css$/i,
-        use: ['style-loader', 'css-loader'],
+          use: getStyleLoaders(false),
-        sideEffects: true,
-      },
-      {
-        test: /\.module\.less$/i,
-        use: [
-          // compiles Less to CSS
-          'style-loader',
-          {loader: 'css-loader', options: {modules: true}},
-          {
-            loader: 'less-loader',
-            options: {
-              lessOptions: {
-                math: 'always',
-              },
-            },
-          },
-        ],
           sideEffects: true,
         },
         {
           test: /\.less$/i,
           exclude: /\.module\.less$/i,
-        use: [
+          use: getStyleLoaders(false, true),
-          // compiles Less to CSS
-          'style-loader',
-          'css-loader',
-          {
-            loader: 'less-loader',
-            options: {
-              lessOptions: {
-                math: 'always',
-              },
-            },
-          },
-        ],
           sideEffects: true,
         },
+        {
+          test: /\.module\.less$/i,
+          use: getStyleLoaders(true, true),
+        },
 
         {
           test: /\.(png|svg|jpg|jpeg|gif)$/i,
@@ -159,3 +241,4 @@ module.exports = {
       ],
     },
   }
+}