Webpack 4 + ReactJS 运行时动态生成publicPath URL 问题咨询

方案核心原理 #

webpack 提供了运行时可修改的自由变量 __webpack_public_path__，可以在应用启动时动态赋值，替代构建时写死的publicPath配置，无需重新构建即可切换资源加载端点。 #

具体实现步骤 #

1. 修改webpack配置 #

将原有构建时判断环境赋值publicPath的逻辑删除，直接设置publicPath为空字符串：

const getOriginalConfig = require('@nrwl/react/plugins/webpack')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = (config, env) => {
  const rootWebpackConfig = getOriginalConfig(config)

  const output = rootWebpackConfig.output

  const updatedConfig = {
    ...rootWebpackConfig,
    output: {
      ...output,
      publicPath: '' // 这里清空，交给运行时赋值
    },
    plugins: [...rootWebpackConfig.plugins, new BundleAnalyzerPlugin({ analyzerMode: 'disabled' })]
  }

  return updatedConfig
}

2. 新增环境配置注入逻辑 #

在项目public目录下新增独立的env-config.js文件，这个文件不需要参与构建，部署时可以直接替换内容：

// public/env-config.js，部署时直接修改这个文件里的环境值即可
window.RUNTIME_ENV = 'test' // 可选值：dev/test/prod

3. 入口文件最顶部赋值__webpack_public_path__ #

注意：赋值逻辑必须放在所有import语句之前，否则先导入的模块加载异步chunk会失效

// src/index.tsx 最顶部优先执行
const env = window.RUNTIME_ENV
if (env === 'dev') {
  __webpack_public_path__ = '{dev-endpoint}'
} else if (env === 'test') {
  __webpack_public_path__ = '{test-endpoint}'
} else if (env === 'prod') {
  __webpack_public_path__ = '{prod-endpoint}'
}

// 后面再写原有import逻辑和应用启动代码
import React from 'react'
import ReactDOM from 'react-dom/client'
// ...其他业务代码

4. 入口HTML引入配置文件 #

在index.html的head最顶部引入env-config.js，保证应用代码加载前已经拿到运行时环境变量：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <script src="%PUBLIC_URL%/env-config.js"></script>
    <!-- 其他meta、title等配置 -->
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

注意事项 #

• __webpack_public_path__赋值的路径末尾必须加/，避免资源路径拼接错误
• 已有的代码分割、懒加载逻辑不需要做任何修改，完全兼容
• 切换环境时仅需要替换env-config.js文件内容，不需要重新构建整个应用

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