webpack 有着丰富的插件接口(rich plugin interface)。webpack 自身的多数功能都使用这个插件接口。这个插件接口使 webpack 变得极其灵活。
webpack.config.js中配置plugins，plugins是一个数组
1、为每个 chunk 文件头部添加 banner
new webpack.BannerPlugin('输出的文件头部添加注释信息')
new webpack.BannerPlugin('millet Creation Time : '+ new Date()),
2、html-webpack-plugin简单创建 HTML 文件，用于服务器访问
这个插件用来简化创建服务于 webpack bundle 的 HTML 文件，尤其是对于在文件名中包含了 hash 值，而这个值在每次编译的时候都发生变化的情况。你既可以让这个插件来帮助你自动生成 HTML 文件，也可以使用 lodash 模板加载生成的 bundles，或者自己加载这些 bundles。需要让webpack.config.js认识这个插件，首先require这个插件，在webpack.config.js下面的plugins下写new这个插件,
npm install --save-dev html-webpack-plugin
plugins:[
new HtmlWebpackPlugin({
title:'标题', //设置title的名字，在html模板的header上加<%= htmlWebpackPlugin.options.title%>
filename:'home.html',//设置这个html的文件名
template:'homeTpl.html',//要使用的模块的路径
inject:'body',//把模板注入到哪个标签后
favicon:'',//给html添加一个favicon
minify:true,//是否压缩
hash:true,//是否hash化
cache:false,//是否缓存
showErrors:false,//是否显示错误
"chunks": {"head": {
"entry":"assets/head_bundle.js",//设置title的名字
"css": ["main.css"]//设置title的名字
},
xhtml:false//是否自动闭合标签
}})
]
3、ExtractTextWebpackPlugin 从 bundle 中提取文本（CSS）到单独的文件
webpack的css－loader,CSS和您的JavaScript打包在一起，将无法利用浏览器的异步和并行加载CSS的能力。这样，您的网页必须等待，直到您的整个JavaScript 包下载完成，然后重绘网页。可以通过使用ExtractTextWebpackPlugin分别打包CSS来帮助解决这个问题。
npm i --save-dev extract-text-webpack-plugin@beta
4、增强 uglifyPlugin webpack-uglify-parallel
uglifyJS凭借基于node开发，压缩比例高，当webpack build进度走到80%前后时，会发生很长一段时间的停滞，经测试对比发现这一过程正是uglfiyJS在对我们的output中的bunlde部分进行压缩耗时过长导致，webpack-uglify-parallel的是实现原理是采用了多核并行压缩的方式来提升我们的压缩速度。
原来webpack中自带的uglifyPlugin配置：
newwebpack.optimize.UglifyJsPlugin({
exclude:/\.min\.js$/,
mangle:true,
compress: {warnings:false},
output: {comments:false}
})
修改成
//os 是node模块 os.cpu()*****cpu信息*******
const os =require('os');
os.cpus().length,
const os =require('os');
const UglifyJsParallelPlugin =require('webpack-uglify-parallel');
newUglifyJsParallelPlugin({
workers: os.cpus().length,
mangle:true,
compressor: {
warnings:false,
drop_console:true,
drop_debugger:true
} })
5、clean-webpack-plugin 清除dist文件夹中重复的文件
npm install --save-dev clean-webpack-plugin
newCleanWebpackPlugin(
['js/*.js','css/main/*.min.css'],//匹配删除的文件
{
root:staticFile,//静态文件
verbose:true,//开启在控制台输出信息
dry:false//启用删除文件
}),
6、autoprefixer自动补全css3前缀
npm install --save-dev autoprefixer
const autoprefixer = require('autoprefixer');//自动补全css3前缀
{
test:/\.(less|css)$/,
use:ExtractTextPlugin.extract({
use:[
{
loader:'css-loader',
options:{
modules:true,
importLoaders:1,
localIdentName:'[local]',//配置生成的标识符(ident)
}
},
{
loader:'less-loader',
},
{
loader:'postcss-loader',
// 在这里进行配置，也可以在postcss.config.js中进行配置，详情参考https://github.com/postcss/postcss-loader
options: {
plugins:function() {
return[
require('autoprefixer')
];
}
}
}
],
fallback:'style-loader',
}),
、
