走进webpack（2）--第三方框架（类库）的引入及抽离

　　正文以前，因为这是一个系列的文章，可能第一次看到的看官老爷们会以为突兀，若是你是webpack新手，我建议你先从前几篇文章看起，若是你对webpack有一些了解，也但愿能够在github上下载代码，对照着看会更有效果

　　在当代的前端开发中，不多会用原生JS来开发页面，最基本的都会使用jQuery来节省咱们开发的时间和效率，而angular，vue，react的出现更是为前端开发者带来了福音。那么这篇文章就说说如何用webpack来打包引入第三方框架（类库）。若是单纯的引入jQuery或者其余第三方类库，在打包的时候webpack会把它一块儿打包进咱们的main.js，也就说，若是咱们引入两三个框架，两三个UI库，那么咱们的集成包会很大，页面的加载时间也会很长，这是咱们不肯见到的结果。因此在学会引入的同时，还要知道如何把第三方类库从咱们的业务逻辑包中抽离出来。

　　那么咱们先来安装一下jQuery，由于在生产环境咱们仍旧是须要jQuery做为依赖的，因此咱们须要用npm install jquery --save来安装它。安装完成以后，咱们在main.js中增长两行代码：

//引入jQuery
import $ from 'jquery';
//编写jQuery代码
$('#jqueryDiv').html('Hello Zaking,jQuery is useful');

　　咱们还须要在index.html中增长一个div容器：

<!-- jQuery代码容器 -->
<div id="jqueryDiv"></div>

　　而后，咱们npm run dev看一下，会发现页面中已经有jQuery代码所生成的文字，说明咱们引入jQuery成功了。你能够在每个须要jQuery的页面这样引入。可是这样会很麻烦，咱们若是经过这样的方式引入了jQuery，可是整个项目中却并无写一行jQuery代码，那么webpack也是会把它打包进去的。并且每个须要jQuery的页面都须要引入的话好麻烦，那么咱们可使用ProvidePlugin来实现一次引入全局使用，并且经过插件的方式来引入第三方类库，若是你不使用它的话，webpack就不会打包它，还不错吧。因为ProvidePlugin是webpack自带的插件，咱们不须要引入他，可是须要引入一下webpack：

//引入webpack
const webpack = require('webpack');

　咱们还须要在入口文件引入jQuery，还记得前面模块化的时候把入口文件单独拆分红了一个entry.js，因此咱们在其中增长一点代码，如今看起来应该是这样的：

entry.path={
    main:'./src/main.js',
    jquery:'jquery'
}

　而后咱们在plugins项下配置一下这个插件，就像这样：

 //建立一个webpack下的ProvidePlugin插件的实例，使全局均可以使用jQuery
new webpack.ProvidePlugin({
   $:"jquery"
})

　　这样就能够了，可是别忘了把main.js中经过import引入的jQuery代码删除，而后再npm run dev试一下。会发现也一样出现了jQuery生成的文字。

　　那么下面咱们就学习一下，如何抽离第三方类库，使其存储在一个单独的文件夹下，在webpack3时代，一般是使用CommonsChunkPlugin，CommonsChunkPlugin也是webpack自带的插件。官方文档是这样解释他的：CommonsChunkPlugin 插件，是一个可选的用于创建一个独立文件(又称做 chunk)的功能，这个文件包括多个入口chunk 的公共模块。经过将公共模块拆出来，最终合成的文件可以在最开始的时候加载一次，便存到缓存中供后续使用。这个带来速度上的提高，由于浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件。

　　简单来讲，就是将公共模块拆分出来以便使浏览器加载速度更快。可是在webpack4时代，已经取消了这个插件取而代之的是splitChunks 和runtimeChunk ，那么咱们就来看一下，在webpack4的环境下，如何抽离多个第三方类库。

　　咱们先来安装一下vue，跟jQuery的安装方式同样，就很少说了，一样的咱们也须要在入口文件处引入vue：

entry.path={
    main:'./src/main.js',
    //引入jQuery和vue
    jquery:'jquery',
    vue:"vue"
}

　　而后再ProvidePlugin中加入vue这个选项：

new webpack.ProvidePlugin({
        $:"jquery",
        vue:"vue"
    })

　　而后咱们在plugins中增长一个配置：

new webpack.optimize.SplitChunksPlugin({
      chunks: "all",
      minSize: 20000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: true
  })

　　而后咱们npm run build一下，会发如今dist的根目录下已经生成了vue.js和jQuery.js。说明咱们打包成功了。那么咱们想要测试一下，vue究竟能用了么？

　　咱们在main.js中引入vue，而且加上vue官网例子中最简单的一个：

import Vue from 'vue'
//vue代码
var app = new Vue({
  el: '#vueApp',
  data: {
    message: 'Hello Vue!'
  }
})

　　而后，咱们在index.html建立一个div容器：

<!-- vue容器 -->
<div id="vueApp">
  {{message}}
</div>

　　而后咱们试一下npm run dev，页面打开以后咱们发现没有hello vue，f12看下控制台，发现报错了。不出意外的话，你的报错信息是这样的：

　　什么意思呢，官方解释是：运行时构建不包含模板编译器，所以不支持 template 选项，只能用 render 选项，但即便使用运行时构建，在单文件组件中也依然能够写模板，由于单文件组件的模板会在构建时预编译为 render 函数。就是说，若是咱们想使用template，咱们不能直接在客户端使用npm install以后的vue。

　　那么咱们须要新增一点配置：

resolve: {
   alias: {
     'vue$': 'vue/dist/vue.esm.js'
  }
}
//resolve是在最外层的，与plugins等同级

　　这样就能够了，而后运行一下，会发现Hello Vue已经出如今咱们的页面之中了。这两天一直加班，因此更新的有点慢，这个系列的文章还有最后一篇，尽可能在这两天就能够完成。