webpack动态导入和require.context分析及使用注意

webpack动态导入和require.context分析及注意事项

实验webpack版本

4.19.0

tldr;

1. 动态导入语法必须是字符串拼接，不能传入函数。

   正确：import('./src' + args + '.index') 错误：import(someFn())

2. 动态导入变量必须以./ 或者webpack设置的alias开始进行字符串拼接。

   import('./src' + args + '/index.js') 或 import('Src/' + args + '/index.js') Src是一个alias地址

3. import('./src' + args + '/index.js')动态导入中的args变量在打包阶段只是一个占位符的作用，等价于查找./src/*/index.js中

4. require.context(目录,是否递归搜索,筛选器)参数只有静态常量有效

动态导入import和require.context的基本概念

作用于两个阶段

1. 打包编译时候进行词法分析，决定哪些文件要打包，拆分还是合并。
2. 程序运行时使用第一阶段打好的模块。

在编译阶段都