webpack打包bundle中如何正确引入外部静态config.js文件

问题根因 #

当前externals配置写法有误。webpack的externals字段仅用于标记对应模块不打入bundle，默认逻辑是假设该模块在运行时已经以全局变量形式存在，不会自动按路径发起网络请求加载外部JS。你直接将相对路径写入externals后，打包代码会尝试从webpack内部模块缓存中查找../config.js，找不到对应模块自然返回undefined。

路径对应关系说明 #

根据给出的部署结构，两个文件的相对位置如下：

• plugin.js部署路径：/plugins/my-plugin/plugin.js
• 全局config.js部署路径：/plugins/config.js
  因此plugin.js运行时访问config.js的相对路径确实为../config.js。

推荐方案：动态脚本加载（适配第三方部署场景） #

该方案不需要依赖第三方站点的脚本加载顺序，可控性最高，同时兼容本地开发和生产环境：

1. 删除webpack配置中externals里的"../config.js"条目，不需要保留该配置。
2. 改写src/index.ts逻辑，运行时动态加载config完成后再执行业务代码：

// 动态加载配置文件
const loadConfig = (): Promise<Record<string, any>> => {
  return new Promise((resolve, reject) => {
    // 区分开发/生产环境的config路径
    const configPath = process.env.NODE_ENV === 'production' 
      ? '../config.js' 
      : '/config.js'
    
    // 临时挂载CommonJS兼容对象，适配module.exports形式的config导出
    (window as any).module = { exports: {} }
    const script = document.createElement('script')
    script.src = configPath
    script.onload = () => {
      const config = (window as any).module.exports
      // 清理临时全局变量避免污染页面环境
      delete (window as any).module
      resolve(config)
    }
    script.onerror = () => reject(new Error('配置文件加载失败'))
    document.head.appendChild(script)
  })
}

// 插件主逻辑
const init = async () => {
  const config = await loadConfig()
  console.log(config)
  // 其余业务逻辑写在此处
}
init()

3. 本地开发适配：如果使用webpack-dev-server，添加静态资源目录映射，保证根路径可直接访问到项目根目录下的config.js即可：

module.exports = {
  // 其余配置
  devServer: {
    static: {
      directory: path.join(__dirname, './')
    }
  }
}

备选方案：externals映射全局变量（需提前加载config） #

如果可以确定第三方站点会在加载plugin.js之前，提前通过script标签引入config.js，可以使用该方案：

1. 修改webpack.config.js的externals配置，将导入模块映射到全局变量：

module.exports = {
  // 其余配置
  externals: {
    "../config.js": "PluginGlobalConfig"
  }
}

2. 生产环境的config.js需要将配置挂载到约定的全局变量上：

window.PluginGlobalConfig = {
  foo: "bar"
}

3. 本地开发时在dist/index.html中提前引入config.js并挂载对应全局变量即可。

注意：该方案强依赖脚本加载顺序，如果config.js在plugin.js之后加载，会直接导致插件运行报错，生产环境优先选择动态加载方案。

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