webpack配置不打包第三方包

最近看friday源码的时候，看到项目中很多依赖使用了公司cdn服务器获取，cdn的优势我们知道，但是项目在打包的时候不是会把所需的生产环境依赖打包进去嘛？原来webpack有个配置externals(帮助我们防止哪个包打进dist里面)。

通常情况下我们不打包第三方包，因为第三方包太大，和bundle打包到一起会造成资源体积过大，所以我们还是通过script标签的方式把第三方资源引入到页面中，只需要通过以下配置即可，这里以jQuery为例。

1、下载第三方包

npm i jquery

2、在页面中引入资源

<script src="www.cdn.codeting.top/lib/jquery.js"</script>

3、配置

externals:{
        //key:包名   value：全局中的jQuery导出的接口
    //当你在代码中import jquery的时候，不会把jquery打包到bundle中，而是使用我指定的全局中的jQuery对象
        jquery:'jQuery',
        vue:'Vue'
    },

4、加载使用

 import $ from 'jquery'

$('#app').css({
    width:'300px',
    height:'300px',
    backgroundColor:'red'
})

5、打包测试

npm run build