Use css modules

.gitignore

@@ -1,2 +1,2 @@
 node_modules/
-dist/
+build/

babel.config.js

@@ -1,12 +1,8 @@
 module.exports = api => {
   // caching the babel config
   api.cache.using(() => process.env.NODE_ENV)
-  console.log(process.env.NODE_ENV, {
-    presets: ['@babel/preset-env', '@babel/preset-react'],
-    plugins: [api.env('development') && 'react-refresh/babel'].filter(Boolean)
-  })
   return {
-    presets: ['@babel/preset-env', '@babel/preset-react'],
-    plugins: [api.env('development') && 'react-refresh/babel'].filter(Boolean)
+    presets: ['@babel/preset-env', '@babel/preset-react']
+    // plugins: [api.env('development') && 'react-refresh/babel'].filter(Boolean)
   }
 }

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "start": "webpack-dev-server --mode development",
     "build": "webpack --mode production",
+    "build-fresh": "rm -rf build/ && npm run build",
     "test": "tests",
     "lint": "eslint src",
     "format": "prettier --write src/**/*.js"
@@ -28,6 +29,7 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.1.1",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
+    "css-loader": "^3.3.2",
     "eslint": "^6.7.2",
     "eslint-config-prettier": "^6.7.0",
     "eslint-plugin-import": "^2.19.1",
@@ -35,10 +37,19 @@
     "eslint-plugin-react": "^7.17.0",
     "eslint-plugin-react-hooks": "^2.3.0",
     "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.8.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "postcss-flexbugs-fixes": "^4.1.0",
+    "postcss-loader": "^3.0.0",
+    "postcss-normalize": "^8.0.1",
+    "postcss-preset-env": "^6.7.0",
     "prettier": "^1.19.1",
     "react-refresh": "^0.7.0",
+    "style-loader": "^1.0.1",
     "webpack": "^4.41.2",
+    "webpack-bundle-analyzer": "^3.6.0",
     "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.9.0"
+    "webpack-dev-server": "^3.9.0",
+    "webpackbar": "^4.0.0"
   }
 }

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: [
+    require('postcss-flexbugs-fixes'),
+    require('postcss-preset-env'),
+    require('postcss-normalize')
+  ]
+}

webpack.config.js

@@ -1,23 +1,85 @@
+const path = require('path')
+
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+  .BundleAnalyzerPlugin
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const WebpackBar = require('webpackbar')
 
-module.exports = {
-  devtool: 'source-map',
-  module: {
-    rules: [
-      {
-        test: /.js$/,
-        exclude: /node_modules/,
-        loader: 'babel-loader'
+module.exports = (env, argv) => {
+  const isEnvProduction = argv.mode === 'production'
+  const isEnvDevelopment = argv.mode === 'development'
+
+  return {
+    output: {
+      path: path.resolve(__dirname, 'build'),
+      filename: 'static/js/[name].[contenthash:8].js',
+      chunkFilename: 'static/js/[name].[contenthash:8].chunk.js'
+    },
+    devtool: isEnvProduction ? 'source-map' : 'cheap-module-source-map',
+    module: {
+      rules: [
+        // process javascript with babel
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          loader: 'babel-loader'
+        },
+        // process css. css modules are enabled.
+        {
+          test: /\.css$/,
+          use: [
+            isEnvDevelopment && 'style-loader',
+            isEnvProduction && MiniCssExtractPlugin.loader,
+            {
+              loader: 'css-loader',
+              options: {
+                modules: {
+                  localIdentName: isEnvProduction
+                    ? '[hash:base64]'
+                    : '[path][name]__[local]'
+                }
+              }
+            },
+            'postcss-loader'
+          ].filter(Boolean)
+        }
+      ]
+    },
+    optimization: {
+      splitChunks: {
+        chunks: 'all',
+        name: false
       }
-    ]
-  },
-  plugins: [
-    new HtmlWebpackPlugin(),
-    // hot reload not working right now
-    new ReactRefreshWebpackPlugin({ disableRefreshCheck: true })
-  ],
-  devServer: {
-    stats: 'minimal'
+    },
+    plugins: [
+      // creat an index.html
+      new HtmlWebpackPlugin(),
+      // show a progress bar
+      new WebpackBar(),
+      // create a report.html for bundle size
+      new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false }),
+      // extract css to css files
+      isEnvProduction &&
+        new MiniCssExtractPlugin({
+          filename: 'static/css/[name].[contenthash:8].css',
+          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css'
+        }),
+      // use cssnano to minify css
+      isEnvProduction &&
+        new OptimizeCssAssetsPlugin({
+          cssProcessorOptions: {
+            map: { inline: false, annotation: true }
+          }
+        })
+      // hot reload not working right now
+      // isEnvDevelopment &&
+      // new ReactRefreshWebpackPlugin({ disableRefreshCheck: true })
+    ].filter(Boolean),
+    devServer: {
+      stats: 'minimal'
+    }
   }
 }