关于 webpack require 的一个问题

Question

对于下面代码，经测试，可以观察到：

1. 使用字符串的@root/test/test.js，模块可以实现按需加载，既触发test/test路由时候才加载这个路由相关文件
2. 使用变量@root/${route}.js，模块却被打包到一起了，在触发路由之前就已经加载了相关包

请问造成这个问题的原因是什么呢？如果我需要均实现按需加载，该怎么处理？感觉每个路由都写一次比较繁琐。

Answer 1

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

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

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

大概的原理的话，因为现在也不怎么折腾 webpack 了，都用 cli 之类的东西了，也记不太清了，不过你可以大概浏览一下这个 issue，里面应该是讨论的类似的问题。