webpack 动态引入一个动态的资源

aweiu

2019-08-21

编程

今天发现了 webpack 一个很有趣的特性，假设存在如下代码：

1 2	const getFile = (fileName) => require(`./test/${fileName}`) getFile('test.js')

然后你的 test 目录中存在如下文件：

原先，我以为这种包含变量的路径可能会导致一个运行时的引入错误，因为看起来对于打包工具来说，它没法确切的知道你要引入的资源是啥？然后应该是得手动把 test 文件夹中的相关资源人工拷贝到 dist 目录的。没想到运行的时候一点毛病都没有，一切正常！

然后猜一下 webpack 会打包哪些资源吧？

好吧，既然让猜了，肯定能猜到是：test.js test2.js test.css test2.css

也就是说如果 require 传入的参数包含变量，webpack 在编译时候的路径分析不会也不可能准确的知道变量的真正可能值，它只会做大限度的把相关的资源都打包。

再看如下代码：

1 2	const fileName = '' require(`./test/${fileName}2.css`)

直接说打包的结果吧！是：test2.css

可以看出路径分析的过程还会尽可能地匹配你传入的参数，以实现在最大限度打包相关资源的同时，避免无关资源的引入。很棒！

再看如下代码：

1 2	const fileName = `./test/test.css` require(fileName)

终于！编译阶段就直接报错了，这种情况才符合最初的直觉，直接引入一个变量 webpack 是无法进行任何路径分析的。

最后，这个特性叫做 require with expression