Webpack 3升级至4.8.3后Bundles无法加载求助

从你提供的新旧Webpack配置、HTML模板以及问题描述来看，核心矛盾是bundle文件已确认生成，但浏览器请求时无法获取。结合Webpack 4与3的差异，我整理了几个关键排查方向和解决办法：

1. SplitChunks的文件名匹配问题 #

Webpack 4用optimization.splitChunks替代了旧版的CommonsChunkPlugin，虽然你在cacheGroups里指定了name: 'vendor'，但默认命名规则可能导致实际生成的文件名和HTML模板里引用的vendor.bundle.js不一致。

解决办法：
在cacheGroups中明确指定filename，和旧配置保持完全一致：

optimization: {
  splitChunks: {
    // ...其他原有配置
    cacheGroups: {
      commons: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendor',
        chunks: 'all',
        filename: 'vendor.bundle.js' // 强制指定文件名，匹配HTML中的引用路径
      },
    },
  },
},

2. DevServer的资源路径映射问题 #

Webpack DevServer默认将bundle存在内存中，资源路径的映射完全依赖output.publicPath配置。如果publicPath不匹配，浏览器请求的路径在DevServer中找不到对应资源。

解决办法：
在output配置中添加publicPath: '/'（和HTML模板中script的绝对路径对应），同时开启DevServer的writeToDisk选项，确保内存与磁盘文件一致：

output: {
  path: path.join(__dirname, 'static'),
  filename: '[name].bundle.js',
  publicPath: '/' // 匹配HTML中的绝对路径引用
},
devServer: {
  // ...其他原有配置
  writeToDisk: true // 强制将bundle写入磁盘，避免内存与磁盘文件不一致的问题
},

3. CSS Loader的Modules选项干扰（非直接原因，但需排除） #

你在新配置中给css-loader添加了modules: true，这会启用CSS模块化。虽然不会直接导致bundle无法加载，但如果项目未适配模块化类名，可能引发编译警告或错误，间接影响bundle生成。如果暂时不需要CSS模块化，可以先注释该选项排除干扰：

{
  test: /\.css$/,
  use: [
    { loader: 'style-loader' },
    { loader: 'css-loader' },
    // 暂时注释modules选项，排查是否存在间接影响
    // { loader: 'css-loader', options: { modules: true } },
  ],
},

4. 验证Bundle文件名与HTML引用的一致性 #

运行Webpack编译时，注意控制台输出的Asset信息，比如：

Asset               Size  Chunks             Chunk Names
app.bundle.js        1.2 MiB    app  [emitted]  app
vendor.bundle.js     2.3 MiB  vendor  [emitted]  vendor

确保这里的文件名和HTML模板中<script src="/vendor.bundle.js"></script>、<script src="/app.bundle.js"></script>完全一致。

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