Webpack提取依赖外部作用域的模块函数引发错误如何解决？

这个问题我之前踩过坑！确实是Webpack在做**绑定导出（harmony export binding）**优化时的一个小bug——当导出的函数代码极简（比如直接返回模块级变量），Webpack会只提取函数的引用，但漏掉了它依赖的模块内部变量（也就是你这里的data），最终导致运行时找不到data_json__WEBPACK_IMPORTED_MODULE_1__。

下面给你几个实用的解决方法，按推荐程度排序：

1. 用闭包包裹依赖，强制Webpack关联变量 #

把模块级的data放到函数的闭包作用域里，让Webpack无法单独拆分函数和它的依赖：

// module A
import data from "data.json";

// 用IIFE创建闭包，把data包裹进去
export const getSomeData = (() => {
  const localData = data;
  return () => localData;
})();

这样Webpack会把localData和导出的函数绑定在一起，不会再忽略依赖。这个方法不影响代码逻辑，也不会大幅增加打包体积，是比较推荐的方案。

2. 给函数添加“冗余”代码，打破极简模式 #

Webpack的这个优化只针对代码极短的函数，你可以加一些无意义的语句（不影响逻辑），让函数不再符合“极简”的判定：

// module A
import data from "data.json";

export function getSomeData() {
  // 加一行无意义的代码，比如定义一个临时变量（可以用eslint-disable忽略警告）
  /* eslint-disable no-unused-vars */
  const _dummy = 0;
  /* eslint-enable no-unused-vars */
  return data;
}

这是个快速的临时 workaround，适合快速验证问题，但不够优雅。

3. 调整Webpack配置，禁用误判的优化项 #

如果多个模块都出现这个问题，可以全局调整Webpack的优化配置，关闭innerGraph（它负责分析模块内的依赖关系，有时会误判）：

// webpack.config.js
module.exports = {
  // ...其他配置
  optimization: {
    innerGraph: false
  }
};

注意：这个配置会关闭全局的内部依赖分析，可能导致打包体积略有增加，所以如果只是单个模块有问题，优先用前两个方法。

4. 把导入放到函数内部（不推荐，仅作补充） #

虽然会改变代码的执行逻辑（每次调用函数都会重新导入JSON），但也能解决问题：

// module A
export function getSomeData() {
  // 把导入放到函数内部
  const data = require("data.json");
  return data;
}

不推荐这个方法，因为JSON是静态资源，重复导入会浪费性能，除非你的JSON是动态变化的。

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