Webpack 4编译成功但bundle.js文件无法加载问题求助

看起来你遇到了Webpack 4升级后资源路径不匹配的问题——编译正常但浏览器找不到脚本文件，这大概率是资源引用路径和Webpack输出配置不匹配导致的。我帮你梳理几个最可能的排查方向：

1. 检查output.publicPath配置 #

Webpack的publicPath是决定资源引用路径的核心配置，它会影响HTML中脚本、样式等资源的加载前缀。如果你的HTML里尝试从/oms/路径下加载脚本，但Webpack没设置对应的publicPath，就会出现404。

在你的Webpack配置中，确保output对象里包含正确的publicPath：

module.exports = {
  // ...其他配置
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'), // 编译后文件的本地存储路径
    publicPath: '/oms/' // 必须和HTML中脚本引用的前缀一致
  }
}

2. 同步Webpack DevServer的publicPath配置 #

如果你使用webpack-dev-server，它的publicPath必须和output.publicPath完全一致，否则内存中的打包资源会找不到：

module.exports = {
  // ...其他配置
  devServer: {
    port: 4200,
    publicPath: '/oms/', // 与output.publicPath保持一致
    contentBase: path.resolve(__dirname, 'dist') // 指向编译后的静态文件目录
  }
}

3. 验证HTML中的脚本引用路径 #

检查login.html里的script标签，确保src路径的前缀和publicPath匹配。比如：

<script src="/oms/ng1.bundle.js"></script>
<script src="/oms/scripts-login.bundle.js"></script>

如果你的HTML是通过html-webpack-plugin自动生成的，那只要publicPath配置正确，插件会自动帮你生成正确的引用路径；如果是手动写的HTML，一定要保证路径前缀和Webpack配置一致。

4. 检查CopyWebpackPlugin的复制规则 #

你用到了CopyWebpackPlugin，如果这个插件的复制路径配置错误，可能会导致资源被放到错误的目录下。比如你想把资源复制到dist/oms/下，要确保规则正确：

new CopyWebpackPlugin({
  patterns: [
    { from: 'src/your-source-path', to: 'oms' } // 目标路径设为oms，对应dist/oms/
  ]
})

5. 确认编译后的文件结构 #

手动查看Webpack编译生成的dist目录，确认ng1.bundle.js和scripts-login.bundle.js是否真的存在于oms子目录下。如果不在，可能是output.path或者entry配置的问题，需要调整输出目录的结构。

额外排查技巧 #

• 打开浏览器开发者工具的Network面板，查看请求的资源路径，对比本地dist目录的实际文件路径，就能快速定位路径不匹配的问题；
• 查看Webpack的编译日志，确认输出的文件路径是否符合预期。

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