webpack 的externals配置

 

  • 官网解释:

webpack 中的 externals 配置提供了不从 bundle 中引用依赖的方式。解决的是,所创建的 bundle 依赖于那些存在于用户环境(consumer environment)中的依赖。

怎么理解呢,意思是如果需要引用一个库,但是又不想让webpack打包(减少打包的时间),并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用(一般都以import方式引用使用),那就可以通过配置externals。

这样做的目的就是将不怎么需要更新的第三方库脱离webpack打包,不被打入bundle中,从而减少打包时间,但又不影响运用第三方库的方式,例如import方式等。

webpack 的externals配置

 默认情况下,你导入几个第三方依赖包都会合并到一个js文件里面去,最终这个文件的体积会相当大,如果你能一些能够拆出的依赖项给它声明到externals这个节点中去,那么在打包期间webpack会先检查程序员有没有在extrernal里面去声明一些第三方的依赖包,如果有的话,webpack就不会把对应的依赖包打包到对应的里面中去,而是在用到这个依赖包的时候直接去window全局对象上查找,现成的对象进行使用,排除某些包不被打包到文件里去