webpack常用插件

1、html-webpack-plugin

作用：①.为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题

　　　②.可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置n个html-webpack-plugin可以生成n个页面入口

new HtmlWebpackPlugin({
   filename:'index.html' //文件名词,
   template:'index.html' //文件路径,
   inject:true //默认值，script标签位于html文件的body底部  
   minify:{
    removeComments:true, //移除注释
    collapseWhitespace:true, //去除空格
    removeAttributeQuotes:true, //移除属性的引号   
    },
    chunksSortMode:'dependency', //按照不同文件的依赖关系来排序，
　　 chunks:['index'] 　//如果是多页面，这里需要指定每个html所要加载的文件名 比如这里就是index.html下，如果不设置 那打包后生成的html所加载的js文件将不对应

})    
//生产环境的配置一般像上述一样，本地开发就不用minify默认是不压缩

2、extract-text-webpack-plugin

坑：暂时不支持webpack4.0.0以上的版本，会出错，解决办法npm install –save-dev extract-text-webpack-plugin@next 
会下载到+ extract-text-webpack-plugin@4.0.0-beta.0 即可解决问题

作用：它会将所有required的 *.css 模块抽取到分离的css文件，所以你的样式将不会内联到 JS bundle，而是在一个单独的css文件，如果你的样式文件很大，这样会提速，因为 CSS bundle 和 JS bundle是平行加载的

new ExtractTextPlugin({
  //生成文件的文件名，可以包含[name]，[id]，[contenthash]
   filename:utils.assetsPath('css/[name].[contenthash].css') 
   //是否抽取其他附加的chunks里的style
   (默认只会抽取原始的chunks，当使用CommonChunkPlugin时，在commons chunk里面也有通过ExtractTextPlugin.extract抽取的chunks，allChunks必须设置为true)
   allChunks:true  
})

3、uglifyjs-webpack-plugin

作用：用来压缩优化js文件，至少需要nodev6.9.0和webpackv4.0.0版本

new UglifyJsPlugin({
    uglifyOptions:{
        compress:{
            warnings:false
        }
    },
   sourceMap:config.build.productionSourceMap,
   parallel:true //使用多进程并行来提高构建速度 
})    

4、commons-chunk-plugin（webpack4取消了，使用了splitChunks进行分包）

作用：用来提取第三方库和公共模块，避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而导致加载时间过长，着实是优化的一把利器

new webpack.optimize.CommonChunkPlugin({
//可以是已经存在的chunk(一般指入口文件)对应的name,那么就会把公共模块代码合并到这个chunk上，否则，会创建名字为name的common chunk进行合并
    name:'app',
//以下两个属性是在代码分割和异步加载当中应用   
   children:true,  //source chunks是通过entry chunks(入口文件)进行代码分割出来的children chunks   
    async:'vendor-async',//即解决children:true时合并到entry chunks自身时初始加载时间过长的问题，为true时，commons chunk 将不会合并到自身，
　　　　　　　　　　　　　　　　而是使用一个新的异步的commons chunk,当这个children chunk 被下载时，自动并行下载该commons chunk
//既可以是数字，也可以是函数，还可以是Infinity 
    minChunks:3

})

5、clean-webpack-plugin

自动删除之前打包生产的dist文件夹

const {CleanWebpackPlugin} = require("clean-webpack-plugin")
plugins:[
   new CleanWebpackPlugin()
]

6、copy-webpack-plugin

文件的复制

new CopyWebpackPlugin([
    {
    from:path.resolve(__dirname,'../static'), //定义要拷贝的源文件
    to:config.build.assetsSubDirectory,//要拷贝到的目标文件夹
    ignore:['.*'] //忽略拷贝指定的文件
    }
])