Angular 5 中使用 Webpack 从 CDN 加载 JS 文件的问题

我之前帮不少开发者解决过类似的 Angular + Webpack CDN 加载问题，结合你的情况，给你一套可行的分步方案：

1. 核心：正确配置 Webpack 的 publicPath #

这是控制所有资源（包括懒加载 Chunks）加载路径的关键，你之前用它搞定了 CSS 和图片，现在要确保它完全覆盖 JS 文件：

• 在 Webpack 生产环境配置中，将 output.publicPath 设置为你的 CDN 完整绝对路径，示例：

  module.exports = {
    // ... 其他配置项
    output: {
      filename: '[name].[contenthash].js',
      chunkFilename: '[name].[contenthash].chunk.js',
      // 替换成你的 CDN 地址，注意末尾要加斜杠
      publicPath: 'https://your-cdn-domain.com/your-app-dist-folder/'
    }
  };
  

• 这个配置会让 Webpack 自动给所有打包生成的 JS（包括懒加载的 .chunk.js）加上 CDN 前缀，完全不需要手动修改文件名。

2. 修正 <base href> 的用法 #

你之前修改 <base href> 出错，是因为混淆了应用路由根路径和资源CDN路径的区别：

• <base href> 的作用是告诉 Angular 如何解析路由路径，它应该指向你的应用部署的根目录（比如 / 或者 /my-app/），而不是 CDN 地址。
• 正确写法示例：

  <!-- 应用部署在域名根目录时 -->
  <base href="/">
  <!-- 应用部署在子目录时 -->
  <base href="/my-app/">
  

• 不要把 CDN 路径写在这里，否则会导致 Angular 路由跳转错误，还会和 Webpack 的 publicPath 产生冲突。

3. 确保 Angular 编译配置不冲突 #

如果你是用自定义 Webpack 配置配合 Angular 5，还要注意：

• 在 tsconfig.json 中，compilerOptions.baseUrl 保持本地开发的路径（比如 ./src）即可，它只影响 TypeScript 的模块解析，和 CDN 资源加载无关。
• 如果你用到了 @angular-devkit/build-angular 相关工具，要确保自定义 Webpack 配置能正确覆盖默认的 publicPath 设置。

4. 验证打包结果 #

打包完成后，检查以下内容确认配置生效：

• 打开 dist 目录下的 index.html，引用的 main.js、polyfills.js 等文件路径应该是完整的 CDN 地址。
• 查看 main.js 或 runtime.js 中的懒加载逻辑，里面的 .chunk.js 路径也应该带有 CDN 前缀（可以直接搜索文件里的 chunk 关键词）。

5. 额外：处理 CDN 缓存问题 #

为了避免 CDN 缓存旧资源，建议给打包文件加上内容哈希（就是上面配置里的 [contenthash]），这样每次代码变更后，文件名会自动更新，CDN 会拉取最新的资源。

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