解除webpack的 "导入 "功能：使用动态参数

![](http://www.guobacai.com/usr/uploads/2021/11/2266150637.png)虽然它是webpack的一个流行的卖点，但导入函数有很多隐藏的细节和功能，很多开发者可能不知道。例如，导入函数可以接受动态表达式，并且仍然能够实现众所周知的功能，如懒惰加载。你可以把动态表达式理解为任何不是原始字符串的东西（比如`import('./path/to/file.js')`）。动态表达式的几个例子是：`import('./animals/' + 'cat' + '.js')，import('./animals/' + animalName + '.js')`，其中 `animalName` 可以在运行时或编译时知道。在这篇文章中，我们将深入研究动态表达式的概念，当它涉及到`import`方法时，希望在最后，你会更熟悉这个`webpack`的功能所提供的一系列可能性。

除了对`import`函数在其参数为静态时的行为方式（即它会创建一个新的块）有基本的了解之外，没有特别的前提条件。还有一篇名为《深入透视`webpack`的捆绑过程》的文章，其中解释了模块和分块等概念，但它应该不会对本文的理解产生太大影响。

在整个文章中，我们将使用活生生的例子（都是以`StackBlitz`应用程序的形式）和图表，所以让我们开始吧!

## 动态参数的意义
虽然值在编译时不知道，但通过使用带有动态参数的`import()`函数，我们仍然可以实现懒惰加载。与`SystemJS`不同，`webpack`不能在运行时加载任何任意的模块，所以值在运行时是已知的这一事实将约束`webpack`，以确保所有参数可能解析的值都被考虑在内。我们将在下面的章节中看到这句话的含义，在那里我们将研究导入函数可以接受的定制。

现在，我们将专注于导入的参数。下面的所有章节都将基于同一个例子，其中有一个名为 `animals` 的目录，里面有对应于 `animals` 的文件。
```bash
├── animals
│   ├── cat.js
│   ├── dog.js
│   ├── fish.js
│   └── lion.js
├── index.js
```
每个例子都像这样使用导入函数：import('./animals/${fileName}.js')。就./animals/${fileName}.js段而言，每个${fileName}指的是一个动态部分，它将被默认替换为/.*/（你可以把它看成一个glob模式）。给定的表达式可以有多个动态部分。所提供的参数最终会变成一个正则表达式对象，它将被用来决定哪些文件应该在后面被考虑。遍历从提供的路径的第一个静态部分开始（在本例中是./animals），在每一步中，它将从当前目录中读取文件并针对这些文件测试正则表达式对象。它也可以遍历嵌套目录（这是默认行为），一旦文件被正确发现，webpack将根据选择的模式进行。在这个例子中，产生的正则表达式对象将是/^\\.\\/.*\\.js$/，它将对位于animals/目录下的所有文件进行测试（例如regExp.test('./cat.js')）。

值得一提的是，遍历和文件发现是在编译时完成的。

顺便提一下，动态部分的替换以及嵌套目录是否应该被遍历，可以由我们在配置文件中选择。

```javascript
// wepback.config.js
module: {
	parser: {
		javascript: {
			wrappedContextRegExp: /.*/,
				wrappedContextRecursive: true
		}
	}
}

```

解除webpack的 "导入 "功能：使用动态参数

评论已关闭