配置webpack不打包第三方包

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

1、下载第三方包

npm i jquery

2、在页面中引入资源

<!--注意 这里的路径以最终的index.html文件位置为准-->    
<script src="../node_modules/jquery/dist/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