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()热更新插件就能够实现热加载