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,159 +3,242 @@ 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__'
-  cache: false,
+  const port = process.env.PORT || 3001
-  resolve: {
+
-    extensions: ['.tsx', '.ts', '.js'],
+
-    alias: {
+  const getStyleLoaders = (modules, withLess) => {
-      'mapbox-gl': 'maplibre-gl',
+    const sourceMap = isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
-      '../../theme.config': path.resolve('./src/semantic-ui/theme.config'),
+    const loaders = [
-    },
+      isEnvDevelopment && require.resolve('style-loader'),
-    modules: ['node_modules', 'src'],
+      isEnvProduction && {
-  },
+        loader: MiniCssExtractPlugin.loader,
-  plugins: [
+        // css is located in `static/css`, use '../../' to locate index.html folder
-    new HtmlWebpackPlugin({
+        // in production `paths.publicUrlOrPath` can be a relative path
-      base: BASE_URL,
+        // options: paths.publicUrlOrPath.startsWith('.')
-      meta: {
+        //   ? { publicPath: '../../' }
-        charset: 'utf-8',
+        //   : {},
-        viewport: 'width=device-width, initial-scale=1',
-        'theme-color': '#000000',
-        description:
-          'Upload the tracks recorded with your OpenBikeSensor device to this portal and participate in the accumulation of Open Data.',
       },
-      favicon: 'public/favicon.ico',
-      manifest: 'public/manifest.json',
-    }),
-
-    isDevelopment && new ReactRefreshWebpackPlugin(),
-  ].filter(Boolean),
-  devServer: {
-    port: PORT,
-    hot: true,
-    compress: true,
-    historyApiFallback: true,
-    static: {
-      directory: path.join(__dirname, 'public'),
-      serveIndex: true,
-    },
-    client: {
-      webSocketURL: `ws://0.0.0.0:${PORT}/ws`,
-    },
-    proxy: {
-      '/api': API_URL,
-      '/login': API_URL,
-    },
-  },
-  module: {
-    rules: [
       {
-        test: /\.(mjs|js|jsx|ts|tsx)$/,
+        loader: require.resolve('css-loader'),
-        include: path.resolve('./src'),
+        options: {
-        use: {
+          modules,
-          loader: 'babel-loader',
+          importLoaders: withLess ? 2 : 1,
-          options: {
+          sourceMap,
-            babelrc: false,
-            configFile: false,
-            cacheDirectory: true,
-            cacheCompression: false,
-            sourceMaps: true,
-            inputSourceMap: true,
-
-            plugins: [
-              isDevelopment && 'react-refresh/babel',
-              [
-                '@babel/plugin-transform-runtime',
-                {
-                  corejs: false,
-                  regenerator: true,
-                  useESModules: true,
-                },
-              ],
-            ].filter(Boolean),
-            presets: [
-              [
-                '@babel/preset-react',
-                {
-                  development: isDevelopment,
-                  runtime: 'automatic',
-                },
-              ],
-              '@babel/preset-typescript',
-              '@babel/preset-env',
-            ],
-          },
         },
       },
       {
-        test: /\.css$/i,
+        // Options for PostCSS as we reference these options twice
-        use: ['style-loader', 'css-loader'],
+        // Adds vendor prefixing based on your specified browser support in
-        sideEffects: true,
+        // 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)
-        test: /\.module\.less$/i,
+    if (withLess) {
-        use: [
+      loaders.push(
-          // compiles Less to CSS
+        // {
-          'style-loader',
+        //   loader: require.resolve('resolve-url-loader'),
-          {loader: 'css-loader', options: {modules: true}},
+        //   options: {
-          {
+        //     sourceMap,
-            loader: 'less-loader',
+        //     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: baseUrl,
+        meta: {
+          charset: 'utf-8',
+          viewport: 'width=device-width, initial-scale=1',
+          'theme-color': '#000000',
+          description:
+            'Upload the tracks recorded with your OpenBikeSensor device to this portal and participate in the accumulation of Open Data.',
+        },
+        favicon: 'public/favicon.ico',
+        manifest: 'public/manifest.json',
+      }),
+
+      isEnvDevelopment && new ReactRefreshWebpackPlugin(),
+    ].filter(Boolean),
+    devServer: {
+      port,
+      hot: true,
+      compress: true,
+      historyApiFallback: true,
+      static: {
+        directory: path.join(__dirname, 'public'),
+        serveIndex: true,
+      },
+      client: {
+        webSocketURL: `ws://0.0.0.0:${port}/ws`,
+      },
+      proxy: {
+        '/api': apiUrl,
+        '/login': apiUrl,
+      },
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(mjs|js|jsx|ts|tsx)$/,
+          // include: path.resolve('./src'),
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader',
             options: {
-              lessOptions: {
+              babelrc: false,
-                math: 'always',
+              configFile: false,
-              },
+              cacheDirectory: true,
+              cacheCompression: false,
+              sourceMaps: true,
+              inputSourceMap: true,
+
+              plugins: [
+                isEnvDevelopment && 'react-refresh/babel',
+                [
+                  '@babel/plugin-transform-runtime',
+                  {
+                    corejs: false,
+                    regenerator: true,
+                    useESModules: true,
+                  },
+                ],
+              ].filter(Boolean),
+              presets: [
+                [
+                  '@babel/preset-react',
+                  {
+                    development: isEnvDevelopment,
+                    runtime: 'automatic',
+                  },
+                ],
+                '@babel/preset-typescript',
+                '@babel/preset-env',
+              ],
             },
           },
-        ],
+        },
-        sideEffects: true,
+        {
-      },
+          test: /\.css$/i,
-      {
+          use: getStyleLoaders(false),
-        test: /\.less$/i,
+          sideEffects: true,
-        exclude: /\.module\.less$/i,
+        },
-        use: [
+        {
-          // compiles Less to CSS
+          test: /\.less$/i,
-          'style-loader',
+          exclude: /\.module\.less$/i,
-          'css-loader',
+          use: getStyleLoaders(false, true),
-          {
+          sideEffects: true,
-            loader: 'less-loader',
+        },
-            options: {
+        {
-              lessOptions: {
+          test: /\.module\.less$/i,
-                math: 'always',
+          use: getStyleLoaders(true, true),
-              },
+        },
-            },
-          },
-        ],
-        sideEffects: true,
-      },
 
-      {
+        {
-        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+          test: /\.(png|svg|jpg|jpeg|gif)$/i,
-        type: 'asset/resource',
+          type: 'asset/resource',
-      },
+        },
 
-      {
+        {
-        test: /\.(woff|woff2|eot|ttf|otf)$/i,
+          test: /\.(woff|woff2|eot|ttf|otf)$/i,
-        type: 'asset/resource',
+          type: 'asset/resource',
-      },
+        },
 
-      {
+        {
-        scheme: 'data',
+          scheme: 'data',
-        type: 'asset/resource',
+          type: 'asset/resource',
-      },
+        },
-    ],
+      ],
-  },
+    },
+  }
 }