如何为嵌入AngularJS指令的React配置webpack-dev-server实现热更新？

1. 修改package.json脚本 #

在scripts节点新增开发环境启动命令，原有build命令保持不变即可：

"scripts": {
  "build": "webpack --mode production",
  "dev": "webpack-dev-server --mode development --hot --inline"
}

2. 调整webpack.config.js配置 #

原有配置保留，新增以下和热更新相关的配置项即可：

const webpack = require('webpack')

module.exports = {
  // 你原有入口、loader、规则等配置全部保持不变
  output: {
    // 你原有output的filename、path等配置不变，新增以下publicPath配置
    publicPath: 'http://localhost:8080/'
  },
  devServer: {
    // 开启热更新
    hot: true,
    // 替换为你AngularJS项目的静态资源目录或打包输出目录
    contentBase: './dist',
    // 配置跨域头，允许AngularJS服务加载dev-server的实时资源
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
    port: 8080,
    // 关闭host检查，避免本地调试时报非法host错误
    disableHostCheck: true
  },
  plugins: [
    // 引入热更新插件
    new webpack.HotModuleReplacementPlugin()
  ]
}

3. （可选）配置React状态保留热更新 #

如果需要修改代码后不刷新页面、保留现有页面状态，可补充以下配置：

• 安装对应兼容版本依赖：npm install react-hot-loader@4 --save-dev
• 在babel配置（.babelrc文件或babel-loader的options配置）中新增插件：

{
  "plugins": ["react-hot-loader/babel"]
}

• 修改React根组件入口文件，用hot方法包裹根组件：

import { hot } from 'react-hot-loader/root'
import App from './App'

// 把原有根组件导出改为以下写法
export default hot(App)

4. 修改AngularJS的资源引入路径 #

把AngularJS页面中引入React打包产物的路径，从本地相对路径临时替换为dev-server的资源地址：

<!-- 原有生产环境的写法暂时注释 -->
<!-- <script src="./dist/react-bundle.js"></script> -->
<!-- 开发环境替换为以下写法 -->
<script src="http://localhost:8080/react-bundle.js"></script>

启动流程 #

• 先启动你原有运行AngularJS的服务（比如本地静态服务、nginx等，保持原有访问地址不变，例如http://localhost:3000）
• 新开终端执行npm run dev启动webpack-dev-server
• 直接访问原有AngularJS的服务地址即可，修改React代码后会自动更新效果，无需手动执行build命令

常见配置失败排查点 #

• publicPath配置和dev-server的实际地址端口不一致是绝大多数配置失败的核心原因
• 确认dev-server的跨域头配置已正确添加，避免AngularJS加载资源时报跨域错误
• 如果不需要保留页面状态，仅需要自动刷新页面，可以去掉react-hot-loader相关配置，仅开启devServer的inline: true即可

内容的提问来源于stack exchange，提问作者Hekkel