Webpack中是否支持通过动态导入从CDN加载npm包？

你遇到的报错和package.json是否声明zoid依赖无关，Webpack默认的动态import()只会解析本地项目内的模块路径，你直接写入完整CDN地址时，Webpack在打包阶段会把该地址当成本地文件路径查找，找不到就会抛出webpackMissingModule错误。

Webpack可以实现从CDN动态加载第三方库，需要做额外配置，以下是几种可落地的方案：

方案1：动态插入script标签（适配性最高，无需复杂webpack配置） #

这是最稳妥的实现方式，不需要依赖Webpack的代码分割能力，完全在运行时处理加载逻辑。

1. 先在webpack配置中声明zoid为外部依赖，避免Webpack尝试打包本地的zoid代码：

// webpack.config.js
module.exports = {
  // 其余配置保持不变
  externals: {
    zoid: 'zoid'
  }
}

2. 封装CDN加载工具函数，自动处理重复加载、加载成功/失败回调：

const loadZoid = (version) => {
  return new Promise((resolve, reject) => {
    // 已加载过直接返回实例
    if (window.zoid) return resolve(window.zoid)
    const script = document.createElement('script')
    script.src = `https://unpkg.com/zoid@${version}/index.js`
    script.onload = () => resolve(window.zoid)
    script.onerror = () => reject(new Error(`zoid@${version} 加载失败`))
    document.head.appendChild(script)
  })
}

3. 业务代码按条件调用即可：

const zoidVersion = isLatestVersion ? '9.0.80' : '9.0.31'
const zoid = await loadZoid(zoidVersion)

方案2：Webpack 5 Module Federation（联邦模块） #

如果你的项目使用Webpack 5及以上版本，可以通过联邦模块配置远程CDN资源，配置完成后即可直接用import()语法加载，适合需要同时管理多个远程依赖的场景。

方案3：Import Maps #

如果你的项目不需要兼容低版本浏览器（Chrome 89+、Firefox 102+支持），可以在HTML中配置Import Maps，将zoid的包名映射到对应版本的CDN地址，Webpack会按照映射规则加载远程资源。

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