之前每次都是先npm run build然后npm start，这个过程真的是漫长且难受！于是就想着还是查下资料看怎么接热更新！

client 用到了react-hot-loader和webpack-dev-server

webpack-dev-server 的热加载是当代码有修改，代码会重新打包，刷新整个页面。而 react-hot-loader 不会刷新整个页面，它只替换了修改的代码，做到了页面的局部刷新。但它依赖 webpack 的 HotModuleReplacement 热加载插件。

package.json：

1

"dev:client": "cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.config.client.js",

webpack.config.client.js：

这里对样式文件有多余的操作，生产环境把 module.scss 结尾的忽略掉（关于样式处理），但是开发环境要把样式用style-loader添加回来。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

if (isProd) {
  config.module.rules.push({
    test: /\.module.scss$/,
    exclude: /node_modules/,
    loader: "ignore-loader",
  });
} else {
  config.entry = {
    app: ["react-hot-loader/patch", "./src/index.tsx"],
  };
  config.devServer = {
    hot: true,
    contentBase: "./dist",
    overlay: {
      errors: true,
    },
  };
  config.module.rules.push({
    test: /\.module.scss$/,
    exclude: /node_modules/,
    use: [
      "style-loader",
      {
        loader: "css-loader",
        options: {
          importLoaders: 1,
          modules: {
            localIdentName: "[name]__[local]-[hash:base64:6]",
          },
        },
      },
      {
        loader: "postcss-loader",
        options: {
          ident: "postcss",
          plugins: [require("autoprefixer")],
        },
      },
      "sass-loader",
    ],
  });
  config.plugins.push(new webpack.HotModuleReplacementPlugin());
}

入口处：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import { AppContainer } from "react-hot-loader";

const root = document.getElementById("root");
if (module.hot) {
  module.hot.accept(() => {
    ReactDOM.render(
      <AppContainer>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </AppContainer>,
      root
    );
  });
}

上面这些操作完后就会发现保存修改客户端页面会自动跟着更改啦。