1.是什么
- 指定排除掉不想被webpack打包的模块。
- 被排除掉的模块,是要在运行时依赖用户环境去获取的。所以,用户的环境必须有被排除掉的包。
2.既然模块不被打包,那么项目中的引入语句如何处理呢?
webpack会根据你对模块的配置,将引入语句,编译生成对应环境下引入语句。
3.如何使用
具体参见官方文档,下面说下要点。
- 如果库的打包为UMD格式的,即:
libraryTarget: 'umd'
,那么需要配置一个对象。如:
externals: {
lodash: {
commonjs: 'lodash',
amd: 'lodash',
root: '_', // 排除的模块,作为全局变量使用,通过script tag引入。默认设置
},
}
为什么这样配置呢?
因为umd格式,是webpack打包后,在任何环境下都能正常使用的。所以,你既然不想其被打包,又想在任何环境下使用,就必须这样配置了!!
- 有一点需要注意,就是root这个property对应的value值,必须是该库提供的全局变量,不是自定义的。
4.应用场景
- 减小项目打包体积,加快打包速度。
- 还有一个比较重要的应用场景:对于打包后可能需要变动的东西,则单独放置于一个文件中,然后利用该配置,通过script标签在HTML文件中引入。那么,即使打包了,也是可以去直接修改打包后的文件的。(比如:生产环境地址和开发地址的临时切换)。但是这个目前比较好的方法,是通过脚本去执行不同的命令,设置不同的环境变量,进而得到地址来做的。
5.与libraryTagret的关系
- libraryTarget决定你的项目以哪种模块规范去运行的。本质上是哪种运行环境可以跑。
- externals决定了以哪种模块规范去加载引入的外部包体。