一、打包第三方類庫
下面說2種方法：
第一種：
1、引入jQuery，首先安裝：
npm install --save-dev jquery
2、安裝好后，在index.js中引入，用jquery語法進行測試
import css from './css/index.css';
import less from './css/black.less';
import $ from "jquery";
let hzhSrting = 'Hello Webpack!'
document.getElementById('pic').innerHTML = hzhSrting;
$("#pic").html("引入了jquery");
3、webpack打包測試，jquery語法正常使用。
第二種：
如果你覺的上面的方法和webpack沒什么關系，只是普通的引入，webpack只是負責了一下打包，這樣並沒有全局感。那再學習一種在webapck.config.js中配置的方法，這種不需要你在入口文件中引入，而是webpack給你作了全局引入。這個插件就是ProvidePlugin。
1、用plugin引入
ProvidePlugin是一個webpack自帶的插件，所以首先我們引入webpack：
const webpack = require('webpack');
2、配置：
new webpack.ProvidePlugin({
$:'jquery'
})
3、配置好后，就可以在你的入口文件中使用了，而不用再次引入了。這是一種全局的引入！
二、抽離第三方類庫
1、修改入口文件(webpack.config.js中)
entry: {
entry: './src/entry.js',
jquery:'jquery',
vue:'vue'
},
2、引入插件：
const webpack = require('webpack');
new webpack.optimize.CommonsChunkPlugin({
name:['jquery','vue'],//對應入口文件的jquery(單獨抽離)
filename:'assets/js/[name].js',//抽離到哪里
minChunks:2//抽離幾個文件
}),//優化
webpack打包，並看效果對比：jquery和vue就抽離出來了，入口文件也變小了。文件中是分別引入了文件。
三、watch自動打包
隨着項目大了，后端與前端聯調，我們不需要每一次都去打包，這樣特別麻煩，我們希望的場景是，每次按保存鍵，webpack自動為我們打包，這個工具就是watch！
因為watch是webpack自帶的插件，所以我們只需要配置就行了
1、在webpack.config.js中配置：
watchOptions:{
poll:1000,//監測修改的時間(ms)
aggregeateTimeout:500, //防止重復按鍵，500毫米內算按鍵一次
ignored:/node_modules/,//不監測
}
2、在終端中輸入：webpack --watch 進行監測打包。這時我們改一個文件，再按保存鍵，webpack就會自動打包。
四、集中拷貝靜態資源
工作中會有一些已經存在但在項目中沒有引用的圖片資源或者其他靜態資源（比如設計圖、開發文檔），這些靜態資源有可能是文檔，也有可能是一些額外的圖片。要求你打包時保留這些靜態資源，
直接打包到制定文件夾。其實打包這些資源只需要用到copy-webpack-plugin。
1、首先新建文件夾public，然后在網上隨便找幾張圖片，保存在文件夾內
2、安裝插件
npm install copy-webpack-plugin --save-dev
3、引入插件
const copyWebpackPlugin = require('copy-webpack-plugin');
4、配置插件
new copyWebpackPlugin([{
from:__dirname+'/src/public',//打包的靜態資源目錄地址
to:'./public' //打包到dist下面的public
}]),
打包之后效果如下：
