webpack动态导入和require.context分析及注意事项
实验webpack版本
4.19.0
tldr;
-
动态导入语法必须是字符串拼接,不能传入函数。
正确:import('./src' + args + '.index') 错误:import(someFn())
-
动态导入变量必须以
./
或者webpack设置的alias
开始进行字符串拼接。import('./src' + args + '/index.js') 或 import('Src/' + args + '/index.js') Src是一个alias地址
-
import('./src' + args + '/index.js')
动态导入中的args变量在打包阶段只是一个占位符的作用,等价于查找./src/*/index.js中 -
require.context(目录,是否递归搜索,筛选器)
参数只有静态常量有效
动态导入import和require.context的基本概念
作用于两个阶段
- 打包编译时候进行词法分析,决定哪些文件要打包,拆分还是合并。
- 程序运行时使用第一阶段打好的模块。