Webpack 5运行webpack serve时修改代码bundle.js不更新问题排查

问题原因及修复方案 #

1. babel-loader排除规则拼写错误 #

你配置中babel-loader的exclude字段值为/nodeModules/，与实际依赖存放目录名node_modules（全小写）不符，该错误会导致编译规则匹配异常，变更的文件无法被正确编译更新到内存bundle中。

2. devServer静态资源配置冲突 #

你将devServer的static目录指向了src目录，而你已经使用HtmlWebpackPlugin自动生成注入了打包产物的HTML文件，devServer会优先加载src目录下的静态资源，而非内存中最新的打包产物，导致页面重载后仍加载旧内容。

3. output缺少publicPath配置 #

Webpack 5开发模式下未显式设置publicPath，会导致热更新生成的增量chunk无法被正确定位加载。

具体修改步骤 #

1. 修正webpack.config.js中babel-loader的排除规则：

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/, // 修正拼写为全小写
      use: {
          loader: 'babel-loader'
      }
    },
    // 其余规则保持不变
  ]
}

2. 修改output配置，新增publicPath字段：

output: {
    path: path.join(__dirname, '/dist'),
    filename: 'index.bundle.js',
    publicPath: '/' // 新增该行
},

3. 调整devServer配置，移除static配置项：

devServer: {
    port: 8080,
    open: true,
    hot: true,
    liveReload: true
},

4. 确认项目根目录存在babel配置文件（.babelrc或babel.config.json），内容如下：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

补充校验 #

确认组件文件名与引入时的大小写完全一致，例如你修改的文件如果名为App.js，引入时不能写为import App from './app.js'，Windows系统对文件名大小写不敏感，但Webpack的文件监听逻辑会因大小写不匹配无法触发正确的增量编译。

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