Webpack 5 开发环境如何编辑node_modules内自研npm包让修改实时生效

核心问题原因 #

1. webpack默认将node_modules下的所有模块标记为不可变资源，开启了持久化缓存后修改自研包源码不会触发缓存失效，导致页面看不到更新
2. 未配置监听忽略规则，node_modules下其他文件的变动会被devServer监听到，引发无限重编译
3. 冗余将自研包添加到entry配置中，引发重复加载和额外的监听逻辑

修改后的完整配置 #

const path = require('path');
const common = require('./webpack.common.config')
const { merge } = require('webpack-merge');
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = merge(common, {
  mode: "development",
  // 移除冗余的自研包entry配置
  entry: ["./index.js"],
  // 新增缓存配置，将自研包排除出不可变资源列表
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename]
    },
    // 除了自研包外，其他node_modules模块仍按不可变资源处理
    managedPaths: [path.resolve(__dirname, 'node_modules', '!(my-own-package)')]
  },
  devServer: {
      port: 80,
      host: '0.0.0.0',
      historyApiFallback: true,
      disableHostCheck: true,
      watchOptions: {
          aggregateTimeout: 500,
          poll: 1000,
          // 忽略除自研包外的所有node_modules文件监听，避免无限重编译
          ignored: [path.resolve(__dirname, 'node_modules', '!(my-own-package)/**')]
      }
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader"
        ]
      }
    ]
  }
});

补充优化建议 #

如果需要长期迭代自研包，更推荐使用npm link做软链调试：

1. 进入本地my-own-package源码根目录，执行npm link
2. 进入当前frontend项目根目录，执行npm link my-own-package

配置完成后修改自研包源码会自动同步到项目依赖中，无需手动复制到node_modules目录。如果自研包使用TypeScript等需要编译的语言，需要在包目录下开启监听构建任务，确保编译后的产物实时更新。

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