如何利用Webpack热模式实现React项目及依赖库的自动刷新？

嘿，这个问题我太懂了——每次改个库代码就得重启应用，真的太磨人了！我给你几个步骤，帮你实现改应用或者库文件都自动刷新的流畅开发流程：

第一步：让React项目的Webpack监听库文件变化 #

Webpack默认会忽略node_modules目录的文件变化，这就是你改库代码没反应的核心原因。你需要修改React项目的Webpack配置（如果是Create React App没eject的话，后面会说替代方案），添加监听规则：

在React项目的webpack.config.js里，加入watchOptions配置，让它不忽略storm-react-diagrams的文件：

module.exports = {
  // ...你的其他配置
  watchOptions: {
    // 忽略node_modules里除了storm-react-diagrams之外的所有文件
    ignored: /node_modules\/(?!storm-react-diagrams)/,
  }
};

第二步：让库文件修改后自动编译 #

你现在改完库的源码后，还得手动重新编译它才能生效。我们可以给库加个监听编译的脚本，让它自动干活：

打开node_modules/storm-react-diagrams/package.json，修改scripts部分，添加一个watch命令：

"scripts": {
  // ...保留原来的脚本
  "watch": "webpack --watch --mode development"
}

然后打开一个新终端，进入node_modules/storm-react-diagrams目录，运行npm run watch。现在你每次修改库的源码，Webpack都会自动重新编译到dist目录，不用手动跑编译命令了。

第三步：让React Dev Server自动刷新页面 #

现在库的编译文件变化会被React项目的Webpack监听到，但有时候Dev Server可能不会自动刷新。你可以在React项目的Webpack配置里调整devServer设置：

devServer: {
  // ...你的其他配置
  hot: true, // 开启热模块替换，可选但体验更好
  watchContentBase: true,
  // 监听库的dist目录变化
  contentBase: path.join(__dirname, 'node_modules/storm-react-diagrams/dist')
}

进阶优化：用npm link管理本地库（可选） #

直接在node_modules里改代码不太方便版本管理，你可以把storm-react-diagrams的源码克隆到本地电脑的其他目录，然后用npm link关联到你的React项目：

• 在本地克隆的库目录里运行npm link，把库注册到本地npm环境
• 在你的React项目目录里运行npm link storm-react-diagrams，这样项目就会使用你本地克隆的库源码
• 然后在克隆的库目录里运行npm run watch，改代码后自动编译，React项目会实时拿到最新代码并刷新，比直接改node_modules舒服多了

如果你用的是Create React App（没eject） #

如果你不想eject暴露Webpack配置，可以用react-app-rewired来修改配置：

1. 安装依赖：npm install react-app-rewired --save-dev
2. 在项目根目录创建config-overrides.js，内容如下：

const path = require('path');

module.exports = function override(config, env) {
  // 添加watchOptions
  config.watchOptions = {
    ignored: /node_modules\/(?!storm-react-diagrams)/,
  };
  // 修改devServer配置
  config.devServer = {
    ...config.devServer,
    hot: true,
    watchContentBase: true,
    contentBase: path.join(__dirname, 'node_modules/storm-react-diagrams/dist')
  };
  return config;
};

3. 修改package.json里的启动脚本：把"start": "react-scripts start"改成"start": "react-app-rewired start"

这样就不用eject也能修改Webpack配置啦！

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