如何配置Webpack实现运行时指定CDN加载非index.html资源？

核心思路 #

只构建一次应用产物，通过HTML模板占位符 + 部署阶段动态替换的方式，让不同环境的index.html自动指向对应CDN，同时配合运行时设置Webpack publicPath，覆盖所有资源的加载路径。

具体步骤 #

1. 配置Webpack与HTML模板

• 改用EJS作为HTML模板（或其他支持参数注入的模板引擎），手动控制script标签生成，同时预留CDN主机占位符。
  示例src/index.ejs：

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>My App</title>
    <!-- 注入全局CDN变量，供Webpack运行时使用 -->
    <script>window.CDN_HOST = '{{CDN_HOST}}';</script>
  </head>
  <body>
    <div id="root"></div>
    <!-- 手动循环生成script标签，拼接CDN占位符与资源路径 -->
    <% htmlWebpackPlugin.files.js.forEach(chunk => { %>
      <script src="{{CDN_HOST}}<%= chunk %>"></script>
    <% }) %>
  </body>
  </html>
  

• 调整Webpack配置：

  • 关闭HtmlWebpackPlugin的自动注入，避免生成默认路径的script标签；
  • 传递占位符作为模板参数；
  • 输出的publicPath设为空字符串，确保资源路径不带固定主机前缀。
    示例Webpack配置片段：

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    output: {
      filename: '[name].[contenthash].js',
      chunkFilename: '[name].[contenthash].chunk.js',
      publicPath: '', // 不设置固定主机，用相对路径
      clean: true
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.ejs',
        inject: false, // 关闭自动注入
        templateParameters: {
          CDN_HOST: '{{CDN_HOST}}' // 传递占位符
        }
      })
    ]
  };
  

2. 运行时设置Webpack publicPath

在应用入口文件（如src/index.js）开头，通过全局变量设置__webpack_public_path__，确保异步chunk、CSS中的图片等资源也从CDN加载：

// 先设置publicPath，再导入应用代码
__webpack_public_path__ = window.CDN_HOST + '/';

import './App';
import './styles/main.css';

3. 部署阶段替换占位符

根据部署环境，用NGINX或部署脚本替换index.html中的{{CDN_HOST}}占位符：

方式一：NGINX sub_filter模块（推荐）

预发布环境NGINX配置片段：

server {
  listen 80;
  server_name staging.your-app.com;

  location / {
    root /path/to/deployed/dist;
    index index.html;
    # 替换CDN占位符为预发布CDN地址
    sub_filter '{{CDN_HOST}}' 'https://staging.examplecdn.com';
    sub_filter_once off; # 替换所有匹配项
  }
}

生产环境NGINX配置片段：

server {
  listen 80;
  server_name your-app.com;

  location / {
    root /path/to/deployed/dist;
    index index.html;
    # 替换CDN占位符为生产CDN地址
    sub_filter '{{CDN_HOST}}' 'https://examplecdn.com';
    sub_filter_once off;
  }
}

方式二：部署脚本替换（如sed）

如果不使用NGINX，可在CI部署步骤中用sed命令替换：
预发布部署命令：

sed -i 's/{{CDN_HOST}}/https:\/\/staging.examplecdn.com/g' /path/to/deployed/dist/index.html

生产部署命令：

sed -i 's/{{CDN_HOST}}/https:\/\/examplecdn.com/g' /path/to/deployed/dist/index.html

方案优势 #

• 单次构建：CI流水线只需构建一次，大幅缩短部署时间；
• 版本一致：预发布与生产环境使用完全相同的构建产物，避免因两次构建导致的版本差异；
• 全资源覆盖：既解决了HTML中script标签的CDN指向问题，也覆盖了运行时加载的所有资源路径。

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