Aborting CSS HMR due to changed css-modules locals when using react-h…

…ot-loader

webpack-contrib/style-loader#320

README.md

@@ -58,7 +58,8 @@ npm run build:prod 构建项目（生产环境）。
   "dev": { // 开发环境配置
     "port": 8000, // 服务器端口
     "https": false, // 是否启用 HTTPS 模式
-    "historyApi": false, // historyApiFallback 选项
+    "hotOnly": false, // 是否热更新失败后自动刷新页面
+    "historyApi": false, // 是否重写 404 请求至 index.html
     "devtool": "cheap-module-eval-source-map", // source maps 选项
     "headers": {}, // 在所有 response 中添加 header
     "rpcMode": "mock", // 接口模式 <mock|proxy|remote>

cfg/base.js

@@ -105,7 +105,14 @@ module.exports = (deployCfg, pathsCfg, publishCfg) => {
 
     // mini-css-extract-plugin 配置
     let cssExtractLoader = deployCfg.assetExtractCss ? MiniCssExtractPlugin.loader : {
-      loader: 'style-loader'
+      loader: 'style-loader',
+      options: {
+        /**
+         * Aborting CSS HMR due to changed css-modules locals when using react-hot-loader
+         * https://github.com/webpack-contrib/style-loader/issues/320
+         */
+        hmr: false
+      }
     };
 
     return {

cfg/devServer.js

@@ -139,13 +139,13 @@ module.exports = (envCfg, pathsCfg, publishCfg, proxyCfg = {}) => {
 
   return {
     hot: true,
-    hotOnly: false,
     inline: true,
     overlay: true,
     compress: true,
     useLocalIp: true,
     disableHostCheck: true,
     port: envCfg.port,
+    hotOnly: envCfg.hotOnly,
     headers: envCfg.headers,
     publicPath: publishCfg.publicAssetPath,
     contentBase: pathsCfg.portalPath,

package.json

@@ -33,6 +33,7 @@
     "dev": {
       "port": 8000,
       "https": false,
+      "hotOnly": true,
       "historyApi": false,
       "devtool": "cheap-module-eval-source-map",
       "headers": {},
@@ -91,12 +92,12 @@
     "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/preset-env": "^7.2.3",
     "@babel/preset-react": "^7.0.0",
-    "autoprefixer": "^9.4.3",
+    "autoprefixer": "^9.4.4",
     "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.0.4",
+    "babel-loader": "^8.0.5",
     "babel-plugin-imports": "^0.2.4",
     "body-parser": "^1.18.3",
-    "cache-loader": "^2.0.0",
+    "cache-loader": "^2.0.1",
     "cookie-parser": "^1.4.3",
     "cross-env": "^5.2.0",
     "css-loader": "^2.1.0",
@@ -109,7 +110,7 @@
     "file-loader": "^3.0.1",
     "gulp": "^4.0.0",
     "gulp-zip": "^4.2.0",
-    "happypack": "^5.0.0",
+    "happypack": "^5.0.1",
     "hash-all-modules-plugin": "^0.2.1",
     "html-loader": "^0.5.5",
     "html-webpack-event-plugin": "^0.2.0",
@@ -128,7 +129,7 @@
     "svg-sprite-loader": "^4.1.2",
     "url-loader": "^1.1.2",
     "web-push": "^3.3.3",
-    "webpack": "^4.28.2",
+    "webpack": "^4.28.3",
     "webpack-bundle-analyzer": "^3.0.3",
     "webpack-command": "^0.4.2",
     "webpack-dev-server": "^3.1.14",