关于 webpack require 的一个问题

Question

对于下面代码，经测试，可以观察到：使用字符串的@root/test/test.js，模块可以实现按需加载，既触发test/test路由时候才加载这个路由相关文件使用变量@root/${route}.js，模块却被打包到一起了，在触发路由之前就已经加载了相关包请问造成这个问题的原因是什么呢？如果我需要均实现按需加载，该怎么处理？感觉每个路由都写一次比较繁琐。

Answer 1

这个应该是正常的现象，webpack 是一个静态打包器，所有的模块都应当是静态解析，所以当它遇到 require('xxxx')的时候就会解析里面的字符串到底包含了哪些模块，那么自然而然 route 对应的所有情况都会打到同一个包中。

解决的办法也是有的，我曾经就遇到过，当时是使用 bundle-loader 这个 loader 解决的。使用方法大概这样：

require('bundle!./foo/bar/' + dynamicSegment);

大概的原理的话，因为现在也不怎么折腾 webpack 了，都用 cli 之类的东西了，也记不太清了。