webpack配置：打包第三方类库、第三方类库抽离、watch自动打包、集中拷贝静态资源

一、打包第三方类库

　　下面说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
}]),

　　打包之后效果如下：