webpack配置：打包第三方類庫、第三方類庫抽離、watch自動打包、集中拷貝靜態資源

1、打包第三方類庫

　　下面說2種方法：

　　第一種：

　　一、引入jQuery，首先安裝：

npm install --save-dev jquery

　　二、安裝好後，在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");

　　三、webpack打包測試，jquery語法正常使用。

　　第二種：

　　若是你覺的上面的方法和webpack沒什麼關係，只是普通的引入，webpack只是負責了一下打包，這樣並無全局感。那再學習一種在webapck.config.js中配置的方法，這種不須要你在入口文件中引入，而是webpack給你做了全局引入。這個插件就是ProvidePlugin。

　　一、用plugin引入

　　ProvidePlugin是一個webpack自帶的插件，因此首先咱們引入webpack：

const webpack = require('webpack');

　　二、配置：

new webpack.ProvidePlugin({
    $:'jquery'
})

　　三、配置好後，就能夠在你的入口文件中使用了，而不用再次引入了。這是一種全局的引入！

2、抽離第三方類庫

　　一、修改入口文件(webpack.config.js中)

entry: {
    entry: './src/entry.js',
    jquery:'jquery',
    vue:'vue'
},

　　二、引入插件：

const webpack = require('webpack');

new webpack.optimize.CommonsChunkPlugin({
    name:['jquery','vue'],//對應入口文件的jquery(單獨抽離)
    filename:'assets/js/[name].js',//抽離到哪裏
    minChunks:2//抽離幾個文件
}),//優化

　　webpack打包，並看效果對比：jquery和vue就抽離出來了，入口文件也變小了。文件中是分別引入了文件。

3、watch自動打包

　　隨着項目大了，後端與前端聯調，咱們不須要每一次都去打包，這樣特別麻煩，咱們但願的場景是，每次按保存鍵，webpack自動爲咱們打包，這個工具就是watch！

　　由於watch是webpack自帶的插件，因此咱們只須要配置就好了

　　一、在webpack.config.js中配置：

watchOptions:{
    poll:1000,//監測修改的時間(ms)
    aggregeateTimeout:500, //防止重複按鍵，500毫米內算按鍵一次
    ignored:/node_modules/,//不監測
}

　　二、在終端中輸入：webpack --watch 進行監測打包。這時咱們改一個文件，再按保存鍵，webpack就會自動打包。

4、集中拷貝靜態資源

　　工做中會有一些已經存在但在項目中沒有引用的圖片資源或者其餘靜態資源（好比設計圖、開發文檔），這些靜態資源有多是文檔，也有多是一些額外的圖片。要求你打包時保留這些靜態資源，

直接打包到制定文件夾。其實打包這些資源只須要用到copy-webpack-plugin。

　　一、首先新建文件夾public，而後在網上隨便找幾張圖片，保存在文件夾內

　　二、安裝插件

npm install copy-webpack-plugin --save-dev

　　三、引入插件

const copyWebpackPlugin = require('copy-webpack-plugin');

　　四、配置插件

new copyWebpackPlugin([{
    from:__dirname+'/src/public',//打包的靜態資源目錄地址
    to:'./public' //打包到dist下面的public
}]),

　　打包以後效果以下：