webpack 有著豐富的插件接口(rich plugin interface)。webpack 自身的多數(shù)功能都使用這個插件接口。這個插件接口使 webpack 變得極其靈活。
webpack.config.js中配置plugins，plugins是一個數(shù)組
1、為每個 chunk 文件頭部添加 banner
new webpack.BannerPlugin('輸出的文件頭部添加注釋信息')
new webpack.BannerPlugin('millet Creation Time : '+ new Date()),
2、html-webpack-plugin簡單創(chuàng)建 HTML 文件，用于服務(wù)器訪問
這個插件用來簡化創(chuàng)建服務(wù)于 webpack bundle 的 HTML 文件，尤其是對于在文件名中包含了 hash 值，而這個值在每次編譯的時候都發(fā)生變化的情況。你既可以讓這個插件來幫助你自動生成 HTML 文件，也可以使用 lodash 模板加載生成的 bundles，或者自己加載這些 bundles。需要讓webpack.config.js認(rèn)識這個插件，首先require這個插件，在webpack.config.js下面的plugins下寫new這個插件,
npm install --save-dev html-webpack-plugin
plugins:[
new HtmlWebpackPlugin({
title:'標(biāo)題', //設(shè)置title的名字，在html模板的header上加<%= htmlWebpackPlugin.options.title%>
filename:'home.html',//設(shè)置這個html的文件名
template:'homeTpl.html',//要使用的模塊的路徑
inject:'body',//把模板注入到哪個標(biāo)簽后
favicon:'',//給html添加一個favicon
minify:true,//是否壓縮
hash:true,//是否hash化
cache:false,//是否緩存
showErrors:false,//是否顯示錯誤
"chunks": {"head": {
"entry":"assets/head_bundle.js",//設(shè)置title的名字
"css": ["main.css"]//設(shè)置title的名字
},
xhtml:false//是否自動閉合標(biāo)簽
}})
]
3、ExtractTextWebpackPlugin??從 bundle 中提取文本（CSS）到單獨(dú)的文件
webpack的css－loader,CSS和您的JavaScript打包在一起，將無法利用瀏覽器的異步和并行加載CSS的能力。這樣，您的網(wǎng)頁必須等待，直到您的整個JavaScript 包下載完成，然后重繪網(wǎng)頁?？梢酝ㄟ^使用ExtractTextWebpackPlugin分別打包CSS來幫助解決這個問題。
npm i --save-dev extract-text-webpack-plugin@beta
4、增強(qiáng) uglifyPlugin webpack-uglify-parallel
uglifyJS憑借基于node開發(fā)，壓縮比例高，當(dāng)webpack build進(jìn)度走到80%前后時，會發(fā)生很長一段時間的停滯，經(jīng)測試對比發(fā)現(xiàn)這一過程正是uglfiyJS在對我們的output中的bunlde部分進(jìn)行壓縮耗時過長導(dǎo)致，webpack-uglify-parallel的是實(shí)現(xiàn)原理是采用了多核并行壓縮的方式來提升我們的壓縮速度。
原來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文件夾中重復(fù)的文件?
npm install --save-dev clean-webpack-plugin
newCleanWebpackPlugin(
['js/*.js','css/main/*.min.css'],//匹配刪除的文件
{
root:staticFile,//靜態(tài)文件
verbose:true,//開啟在控制臺輸出信息
dry:false//啟用刪除文件
}),
6、autoprefixer自動補(bǔ)全css3前綴
npm install --save-dev autoprefixer
const autoprefixer = require('autoprefixer');//自動補(bǔ)全css3前綴
{
test:/\.(less|css)$/,
use:ExtractTextPlugin.extract({
use:[
{
loader:'css-loader',
options:{
modules:true,
importLoaders:1,
localIdentName:'[local]',//配置生成的標(biāo)識符(ident)
}
},
{
loader:'less-loader',
},
{
loader:'postcss-loader',
// 在這里進(jìn)行配置，也可以在postcss.config.js中進(jìn)行配置，詳情參考https://github.com/postcss/postcss-loader
options: {
plugins:function() {
return[
require('autoprefixer')
];
}
}
}
],
fallback:'style-loader',
}),
、
