前端报错「Failed to load resource」：Webpack打包配置错误与CDN加速方案

前端报错「Failed to load resource」通常与Webpack打包配置错误或资源加载路径问题相关，尤其在生产环境下，可能因路径错误、CDN配置不当或资源未正确发布导致。以下是结合Webpack配置优化与CDN加速的解决方案：

一、Webpack 打包配置错误排查与修复

1. 资源路径配置错误

• 问题表现：生产环境构建后，静态资源（如JS、CSS、图片）返回404错误。
• 解决方案：
  • 配置publicPath：在webpack.config.js中设置正确的资源路径前缀，例如：

    output: {
           
      publicPath: process.env.NODE_ENV === 'production' ? '/your-cdn-path/' : '/',
      filename: '[name].[contenthash].js',
      path: path.resolve(__dirname, 'dist'),
    },
    

  • 相对路径问题：确保index.html中引用的资源路径与publicPath一致，避免直接使用绝对路径。

2. 文件哈希值未更新

• 问题表现：修改代码后，浏览器仍加载旧版本资源。
• 解决方案：
  • 启用内容哈希：在output.filename中使用[contenthash]，确保文件内容变化时哈希值更新。
  • 清理缓存：配置webpack-manifest-plugin生成资源映射表，或通过CDN缓存控制策略（如Cache-Control: no-cache）强制刷新。

3. 资源未正确复制到输出目录

• 问题表现：打包后dist目录缺少某些资源文件。
• 解决方案：
  • 使用CopyWebpackPlugin：

    const CopyWebpackPlugin = require('copy-webpack-plugin');
    module.exports = {
           
      plugins: [
        new CopyWebpackPlugin({
           
          patterns: [
            {
            from: 'src/assets', to: 'assets' },
          ],
        }),
      ],
    };
    

4. 代码分割（Code Splitting）配置错误

• 问题表现：动态加载的chunk文件404。
• 解决方案：
  • 确保publicPath正确：动态加载的chunk路径需与publicPath一致。