webpack 热更新的解决方案

本文目录 [隐藏]

一、Cli的方式
二、Node.js API
三、React-hot-loader

一、Cli的方式

1. webpack-dev-server 命令行参数加上 --hot

2. src/index.js 增加 module.hot.accept()，如下。当模块更新的时候，通知index.js。

import React from 'react';
import ReactDom from 'react-dom';

import getRouter from './router/router';

if (module.hot) {
    module.hot.accept();
}

ReactDom.render(
    getRouter(), document.getElementById('app'));

二、Node.js API

修改webpack的dev配置文件

const webpack = require('webpack');

module.exports = {
  ....// 省略其他配置
  devServer: {
    hot: true
  },
  plugins:[
     new webpack.HotModuleReplacementPlugin() //插件
  ],
}

三、React-hot-loader

上面两种方式的配置都很简单，但是对react的支持不是很好，在更新页面的时候，state会丢失。
1. 安装依赖：npm install react-hot-loader@next --save-dev
**2. 修改babel配置
① 如果有 .babelrc ，则增加 react-hot-loader/babel**

{
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ]
}

② 如果是create-react-app项目就在webpack.config.dev.js文件module-rules-oneOf下新增代码"plugins": ["react-hot-loader/babel"]

  // Process JS with Babel.
  {
    test: /\.(js|jsx|mjs)$/,
    include: paths.appSrc,
    loader: require.resolve('babel-loader'),
    options: {
      
      // This is a feature of `babel-loader` for webpack (not Babel itself).
      // It enables caching results in ./node_modules/.cache/babel-loader/
      // directory for faster rebuilds.
      cacheDirectory: true,
      plugins: [
        'react-hot-loader/babel' // +
      ]
    },
  },

3. webpack.dev.config.js 增加 react-hot-loader/patch 到 entry 第一行

entry: [
    'react-hot-loader/patch',
    path.join(__dirname, 'src/index.js')
]

4. src/index.js修改如下

import React from 'react';
import ReactDom from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import App from './App';

/* 初始化 */
renderWithHotReload(<App />);

/* 热更新 */
if (module.hot) {
  module.hot.accept('./App', () => {
    renderWithHotReload(<App />);
  });
}

function renderWithHotReload(RootElement) {
  ReactDom.render(
    <AppContainer>
      {RootElement}
    </AppContainer>,
    document.getElementById('root')// 这边的 root 是你在index.html里定义的根节点id 
  );
}