javascript - 关于webpack代码分割的一点疑惑

Question

在使用webpack 的Code Splitting功能时，我写了如下代码：

//因为模块路径比较长，可以重复利用，就定义成一个变量
var _moduleA = './components/A.js'; 
require.ensure([_moduleA],function(require){
    var ModuleA = require(_moduleA);
    //...其他操作
});

然后执行webpack -w命令就发现了一些异常的地方，webpack处理了所有模块（包含未用到的图片，一些react demo模块）,控制台打出警告：

WARNING in ./src/main.js
Critical dependencies:
52:2-9 require function is used in a way in which dependencies cannot be statically extracted
 @ ./src/main.js 52:2-9

大概是：不安全的依赖，不能被静态导入

能解释下其中涉及的原理吗?

我猜测是不是这样：webpack先查找所有依赖模块（正则匹配），如果发现这种不安全依赖的写法（依赖模块是变量），就把所有模块都编译好。防止js真正执行的时候找不到

Answer 1

https://github.com/webpack/webpack/issues/1504
https://github.com/dcodeIO/protobuf.js/issues/339

可以搜一下，网上还蛮多和你一样的问题的。看了下，感觉就是大小写的问题… 估计是 webpack 的一个坑。