webpack如何不打包第三方模块

在一些前端工程中，不是所有的模块都需要打包到最终的生产中，例如开发UI库，我们不需要把依赖的基础框架和库打进去（比如vue，react，jquery等），因为它们在业务工程中会肯定会被引入，没必要在UI库中打包，而且打包进来不仅让UI库体积庞大，还可能在业务工程中引发版本依赖冲突。那么如何让工程在打包中避开某些不希望被打包的第三方模块呢？

webpack的externals可以帮到你，它的配置非常简单。

external的配置

在webpack的配置文件中添加externals属性，把你不希望打包在最终结果中的包写进去就行了，你的其他代码不需要任何更改，头部的 import、require 什么的都不用变。

// webpack.config.js
module.exports = {
	externals: {
		jquery: 'jquery',
		react: 'react',
		'react-dom': 'react-dom'
	}
}

然后再build打包的时候，你会发现打包出来的文件体积小了很多很多，打开编译后的文件看就会发现指定的第三方库都从代码中剔除了。

–
GOODLUCK！