feat: add webpack hmr config

Author: uniquemo

package.json

@@ -82,6 +82,7 @@
     "postcss-loader": "^3.0.0",
     "postcss-nested": "^4.2.1",
     "prettier": "^2.1.0",
+    "style-loader": "^1.2.1",
     "terser-webpack-plugin": "^3.0.1",
     "typescript": "^3.8.3",
     "url-loader": "^4.1.0",

src/index.tsx

@@ -14,4 +14,12 @@ const Root = () => {
   )
 }
 
-ReactDOM.render(<Root />, document.getElementById('root'))
+const render = () => {
+  ReactDOM.render(<Root />, document.getElementById('root'))
+}
+
+render()
+
+if ((module as any).hot) {
+  ;(module as any).hot.accept(['./pages/App.tsx'], () => render())
+}

webpack.base.config.js

@@ -65,24 +65,6 @@ export default (env, argv) => {
           ],
           include: /node_modules/
         },
-        {
-          test: /\.module\.css$/,
-          use: [
-            MiniCssExtractPlugin.loader,
-            {
-              loader: 'css-loader',
-              options: {
-                import: true,
-                modules: {
-                  localIdentName: '[path][name]__[local]--[hash:base64:5]'
-                },
-                importLoaders: 1
-              }
-            },
-            'postcss-loader'
-          ],
-          include: /src/
-        },
         {
           test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg)$/,
           use: [

webpack.dev.config.js

@@ -2,6 +2,28 @@ import webpack from 'webpack'
 
 export default {
   devtool: 'cheap-module-eval-source-map',
+  module: {
+    rules: [
+      {
+        test: /\.module\.css$/,
+        use: [
+          'style-loader',   // CSS的HMR需要使用style-loader
+          {
+            loader: 'css-loader',
+            options: {
+              import: true,
+              modules: {
+                localIdentName: '[path][name]__[local]--[hash:base64:5]'
+              },
+              importLoaders: 1
+            }
+          },
+          'postcss-loader'
+        ],
+        include: /src/
+      },
+    ]
+  },
   plugins: [
     new webpack.HotModuleReplacementPlugin()
   ],

webpack.prod.config.js

@@ -1,8 +1,31 @@
 import { CleanWebpackPlugin } from 'clean-webpack-plugin'
 import OptimizeCssAssetsWebpackPlugin from 'optimize-css-assets-webpack-plugin'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import cssnano from 'cssnano'
 
 export default {
+  module: {
+    rules: [
+      {
+        test: /\.module\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              import: true,
+              modules: {
+                localIdentName: '[path][name]__[local]--[hash:base64:5]'
+              },
+              importLoaders: 1
+            }
+          },
+          'postcss-loader'
+        ],
+        include: /src/
+      },
+    ]
+  },
   plugins: [
     new CleanWebpackPlugin(),
     new OptimizeCssAssetsWebpackPlugin({

yarn.lock

@@ -8116,6 +8116,14 @@ strip-json-comments@^3.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.0.tgz#7638d31422129ecf4457440009fba03f9f9ac180"
   integrity sha512-e6/d0eBu7gHtdCqFt0xJr642LdToM5/cN4Qb9DbHjVx1CP5RyeM+zH7pbecEmDv/lBqb0QH+6Uqq75rxFPkM0w==
 
+style-loader@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.2.1.tgz#c5cbbfbf1170d076cfdd86e0109c5bba114baa1a"
+  integrity sha512-ByHSTQvHLkWE9Ir5+lGbVOXhxX10fbprhLvdg96wedFZb4NDekDPxVKv5Fwmio+QcMlkkNfuK+5W1peQ5CUhZg==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^2.6.6"
+
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"