Vue3通过CDN导入Webpack打包模块时出现default导出缺失错误

问题分析 #

原生ES模块的默认导出可正常通过import导入，但经Webpack打包为UMD格式后，出现requested module 'xxx' does not provide an export named 'default'错误，核心原因是Webpack默认不会将ES模块的默认导出映射为UMD模块的默认导出，导致ES模块加载时无法识别。

解决方案 #

修改Webpack配置的output.library配置，显式指定将入口模块的默认导出作为UMD库的导出值，并适配跨环境的全局对象：

修改后的完整Webpack配置 #

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/test.js', // 根据项目目录结构修正入口路径，避免上级目录引用错误
  output: {  
       filename: 'compactedModule.js',
       path: path.resolve(__dirname, 'dist'),  
       library: {
         name: 'randomGenerator',
         type: 'umd',
         export: 'default' // 明确指定导出入口模块的默认值
       },
       globalObject: 'this' // 兼容浏览器和Node.js环境的全局对象
  },
  plugins: [
    new CleanWebpackPlugin(),
  ],
};

关键配置说明 #

1. library.export: 'default'：
   告诉Webpack将入口文件的export default内容作为UMD库的核心导出值，这样当用ES模块语法import xxx from 'xxx'导入时，就能正确获取到默认导出的对象。

2. globalObject: 'this'：
   解决UMD格式在浏览器（全局对象为window）和Node.js（全局对象为global）环境下的差异，避免打包后的代码在不同环境中出现全局对象引用错误。

3. 修正入口路径：
   原配置中entry: '../src/test.js'可能存在路径层级错误（若Webpack配置文件在项目根目录），改为./src/test.js更符合常规项目结构，确保Webpack能正确找到入口文件。

验证步骤 #

1. 执行Webpack重新打包命令
2. 将打包后的compactedModule.js部署到CDN
3. 用原导入代码测试：

import randomGenerator from 'https://x.com/my-script.js'; 
console.log(randomGenerator.generateRandomNumber(1, 100));

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