Webpack项目中本地依赖components变更时，如何自动重新编译examples？

我明白你的需求——当修改components里的代码时，希望examples能自动触发Webpack重新编译。下面是几个可行的方案，按推荐程度排序：

方案1：配置Webpack监听本地依赖目录 #

这是最直接的方法，让Webpack明确监听../components下的文件变化。

在examples目录的Webpack配置文件（比如webpack.config.js）中，添加或修改以下配置：

const path = require('path');

module.exports = {
  // 确保开发环境下开启watch模式（webpack-dev-server默认会开启）
  watch: true,
  watchOptions: {
    ignored: /node_modules/,
    aggregateTimeout: 300, // 文件变化后延迟300ms再编译，避免频繁触发
    poll: 1000, // 可选，适用于不支持原生文件监听的环境（比如Windows子系统）
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        // 明确包含当前项目和components目录，确保loader能处理这些文件
        include: [
          path.resolve(__dirname, './'),
          path.resolve(__dirname, '../components')
        ],
        use: 'babel-loader',
      },
    ],
  },
};

注意：如果你的components是通过npm install ../components安装到examples/node_modules的，Webpack默认会忽略node_modules下的文件监听，所以一定要用include规则明确指定要处理的目录，不要依赖exclude。

方案2：使用npm link建立软链接 #

通过npm link让components成为全局可访问的包，再在examples中链接它，这样Webpack能直接监听源文件的变化：

1. 在components目录下运行：

npm link

2. 在examples目录下运行：

npm link components

此时examples/node_modules/components会变成指向../components的软链接，Webpack在watch模式下会自动追踪源文件的修改（只要loader配置正确，没有排除这个目录）。

方案3：给components添加实时编译脚本 #

如果你的components需要先编译（比如输出到dist目录），可以在components中开启watch模式实时构建，再让examples依赖编译后的产物：

1. 在components的package.json中添加watch脚本：

{
  "scripts": {
    "watch": "webpack --watch" // 假设components自身用Webpack构建
  }
}

2. 修改examples的package.json依赖路径：

{
  "devDependencies": {
    "components": "../components/dist"
  }
}

3. 同时启动两个进程：在components目录运行npm run watch，在examples目录启动开发服务器，这样两边的变化都会实时同步。

验证方法 #

修改components/index.js中的代码，观察examples的Webpack控制台是否输出重新编译的日志，浏览器是否自动刷新（如果使用了webpack-dev-server）即可确认生效。

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