webpack3整理（第二节/满三节）

消除未使用的CSS:安装PurifyCSS-webpack插件
cnpm i purifycss-webpack purify-css -D
const glob = require('glob');
const PurifyCSSPlugin = require("purifycss-webpack");
plugins:[
    new extractTextPlugin("css/index.css"),  //这里的/css/index.css是分离后的路径位置
    new PurifyCSSPlugin({
        paths: glob.sync(path.join(__dirname, 'src/*.html')),
        })
]
注明:这里配置了一个paths，主要是需找html模板，purifycss根据这个配置会遍历你的文件，查找哪些css被使用了。
使用这个插件必须配合extract-text-webpack-plugin这个插件。
----------------------------------------------------------------------------------------------
Babel的安装与配置
cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-react -D
注明:babel-preset-react(解析jsx语法的包vue可以不装)
配置:
{
    test:/.(jsx|js)$/,
    use:{
        loader:'babel-loader',
        options:{
            presets:[
                "es2015","react"
            ]
        }
    },
    exclude:/node_modules/
}

虽然Babel可以直接在webpack.config.js中进行配置，但是考虑到babel具有非常多的配置选项，
如果卸载webapck.config.js中会非常的雍长不可阅读，所以我们经常把配置卸载.babelrc文件里。
----------------------------------------------------------------------------------------------
.babelrc配置

{
  "presets":["react","es2015"]
}

loader配置可更改为:
{
    test:/.(jsx|js)$/,
    use:{
        loader:'babel-loader',
    },
    exclude:/node_modules/
}
现在网络上已经不流行babel-preset-es2015官方推荐使用的是babel-preset-env
cnpm install  babel-preset-env -D
{
    "presets":["react","env"]
}
在实际工作中还是要安装Babel的，这样能更好的兼容每种浏览器，把Babel的配置文件分解出来是最好的选择。
----------------------------------------------------------------------------------------------
开发环境和测试环境的差异性
一个项目中是有开发环境和生产环境的，这两个环境的依赖也是不同的:
开发依赖：只在开发中用来帮助你进行开发，简化代码或者生成兼容设置的以来包。你可以打开package.json来查看，devDependencies的下面的这些包为开发使用的包。这些包在生产环境中并没有用处。
生产依赖：就是比如我们的js使用了jquery，jquery的程序要在浏览器端起作用，也就是说我们最终的程序也需要这个包，这就是生产依赖。这些包在dependencies中。

npm安装/cnpm安装(cnpm方便快捷求稳的话建议npm)
第一种：
npm install jquery //不建议的安装方式
第二种：（-S是简写方式安装）
npm install jquery --save //安装完成后，它存在于package.json的dependencies中，也就是说它是生产环境需要依赖的包（上线时需要的以来包）。
第三种：（-D是简写方式安装）
npm install jquery --save-dev //安装完成后，它存在于package.json的devDependencies中，也就是说它是开发环境中需要的，上线并不需要这个包的依赖。
----------------------------------------------------------------------------------------------
JS中的模块化实现
webpack模块
function gogo(){
  alert('hello:'+'webpack');
}
module.exports=gogo;
优雅打包第三方类库
ProvidePlugin是一个webpack自带的插件
plugins:[
    new webpack.ProvidePlugin({
        $:"jquery"
    })
]
BannerPlugin插件使用后会在JS中加上我们的版权或开发者声明
watch的配置:(在webpack.config.js中和入口出口同一个文件里面配置)
watchOptions:{
    //检测修改的时间，以毫秒为单位
    poll:1000, 
    //防止重复保存而发生重复编译错误。这里设置的500是半秒内重复保存，不进行打包操作
    aggregateTimeout:500, 
    //不监听的目录
    ignored:/node_modules/, 
}

后端与前端联调，我们不需要每一次都去打包，这样特别麻烦，我们希望的场景是，每次按保存键，webpack自动为我们打包。
----------------------------------------------------------------------------------------------
单个/多个第三方类库抽离
1、安装第三方类库如jq，vue，swiper等等
2、修改入口文件
entry:{
    entry:'./src/main.js',
    jquery:'jquery',
    vue:'vue'
},
3、修改CommonsChunkPlugin配置
需要修改两个位置：
第一个是在name属性里把原来的字符串(单个第三方库)改为数组（多个第三方库），因为我们要引入多个模块，所以是数组；
第二个是在filename属性中把我们输出的文件名改为匹配付[name],这项操作就是打包出来的名字跟随我们打包前的模块。
单个第三方库配置:
new webpack.optimize.CommonsChunkPlugin({
    //name对应入口文件中的名字，我们起的是jQuery
    name:'jquery',
    //把文件打包到哪里，是一个路径
    filename:"assets/js/jquery.min.js",
    //最小打包的文件模块数，这里直接写2就好
    minChunks:2
})
多个第三方库配置:
new webpack.optimize.CommonsChunkPlugin({
    //name对应入口文件中的名字，我们起的是jquery
    name:['jquery','vue'],
    //把文件打包到哪里，是一个路径
    filename:"assets/js/[name].js",
    //最小打包的文件模块数，这里直接写2就好
    minChunks:2
})
----------------------------------------------------------------------------------------------
静态资源集中输出（项目中没有引用的图片资源或者其他静态资源）
使用copy-webpack-plugin插件
cnpm install --save-dev copy-webpack-plugin
在webpack.config.js引入
const copyWebpackPlugin= require("copy-webpack-plugin");
配置:
new copyWebpackPlugin([{
        from:__dirname+'/src/public',
        to:'./public'
    }])
from:要打包的静态资源目录地址，这里的__dirname是指项目目录下，是node的一种语法，可以直接定位到本机的项目目录中。
to:要打包到的文件夹路径，跟随output配置中的目录。所以不需要再自己加__dirname。

new webpack.HotModuleReplacementPlugin()热更新插件就可以实现热加载