Webpack导入变量未定义问题：仅赋值给新变量可正常使用

这是个挺有意思的Webpack坑，我之前也碰到过类似的情况！你遇到的核心问题是：直接使用从模块导入的默认导出变量时，出现ReferenceError: register_ is not defined，但把它赋值给另一个变量后就能正常运行。

问题原因分析 #

大概率是Webpack的Tree Shaking机制或者模块解析的时序冲突导致的：

• Tree Shaking会在静态分析阶段移除未被使用的代码，而你用require()做动态导入的场景下，Webpack可能没识别到register_这个变量在运行时被实际引用，误以为它是无用变量，直接把它从打包产物里删掉了，导致运行时报错。
• 当你把导入的变量赋值给另一个变量（比如const register_ = register），Webpack能明确感知到这个变量被后续代码使用，就不会把它删掉，自然就能正常运行。

可行解决方案 #

1. 保留中转变量（你当前的临时解决方案） #

虽然看起来像“hack”，但这是最简单有效的临时办法，本质是强制Webpack识别到变量的引用：

import register from './ComponentsRegister';
const register_ = register; // 让Webpack明确这个变量被使用

const Components = {}
for (var i=0; i<register_.length; i++) {
  Components[register_[i].name] = require(''+register_[i].path).default;
}
export default Components;

2. 改用ES模块动态导入语法（推荐） #

Webpack对ES模块的import()语法支持更好，能完美识别动态导入的依赖关系，也能避免Tree Shaking的误删问题：

import register from './ComponentsRegister';

const Components = {};

// 用Promise.all批量处理动态导入
export default Promise.all(register.map(item => 
  import(item.path).then(module => {
    Components[item.name] = module.default;
  })
)).then(() => Components);

这种方式返回的是一个Promise，你在使用Components的时候需要用await或者.then()来获取，比如在入口文件里：

import getComponents from './your-file-path';

getComponents().then(Components => {
  // 在这里使用Components对象
});

3. 调整Webpack配置（不推荐） #

如果一定要用require()且不想加中转变量，可以尝试禁用Tree Shaking的相关配置，在webpack.config.js里的optimization选项中设置：

module.exports = {
  // ...其他配置
  optimization: {
    usedExports: false, // 禁用未使用导出的分析，避免Tree Shaking误删
  }
};

不过这种方法会影响整个项目的打包优化，不推荐在生产环境使用。

验证方法 #

你可以对比两种写法的Webpack打包产物：直接使用register_的情况下，搜索打包后的代码，大概率找不到register_的定义；而加了中转变量的写法里，能看到这个变量被保留了下来，这就能验证是Tree Shaking导致的问题。

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