分享15個(gè)Webpack實(shí)用的插件！！！
前言
初衷： 分享一下工作中實(shí)用的幾個(gè)Plugin，希望對(duì)大家有些幫助，不喜勿噴。
html-webpack-plugin
用途： 將一個(gè)頁面模板打包到dist目錄下，默認(rèn)都是自動(dòng)引入js or css
安裝
cnpm i html-webpack-plugin@3.2.0 -D
配置
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首頁</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: './index.html', // 以咱們本地的index.html文件為基礎(chǔ)模板
filename: "index.html", // 輸出到dist目錄下的文件名稱
}),
]
}
HtmlWebpackPlugin接收一個(gè)對(duì)象，里面自行進(jìn)行配置，詳細(xì)參見這里
clean-webpack-plugin
用途： 用于每次打包dist目錄刪除
安裝
cnpm i clean-webpack-plugin -D
配置
webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
plugins: [
new CleanWebpackPlugin()
]
}
extract-text-webpack-plugin
用途： 將css樣式從js文件中提取出來最終合成一個(gè)css文件，該插件只支持webpack4之前的版本，如果你當(dāng)前是webpack4及以上版本那么就會(huì)報(bào)錯(cuò)。
安裝
cnpm i extract-text-webpack-plugin -D
配置
webpack.config.js
const extractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new extractTextPlugin({
filename: "[name].css",
allChunks: true
})
]
}
上面配置中，extractTextPlugin.extract里面參數(shù)fallback是當(dāng)提取不成功時(shí)，就執(zhí)行style-loader。use里面是提取時(shí)使用css-loader進(jìn)行轉(zhuǎn)換，plugins里面的配置filename是最后合并完的.css文件名稱，當(dāng)allChunks為false時(shí)，只會(huì)提取初始化時(shí)的css文件，為true時(shí)會(huì)提取異步的css文件。
mini-css-extract-plugin
用途： 該插件與上面的exract-text-webpack-plugin的一樣，都是將css樣式提取出來, 唯一就是用法不同，本插件的webpack4版本之后推薦使用
安裝
cnpm i mini-css-extract-plugin -D
配置
webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].css",
chunkFilename: "css/[name].css"
})
]
}
上面配置中，可以看到用法與exract-text-webpack-plugin不同，來看一下它們的區(qū)別。
loader配置沒有fallback在 plugin中設(shè)置filename同步加載資源名稱，還要指定異步加載css資源chunkFilename該插件支持配置 publicPath用來設(shè)置異步加載css的路徑exract-text-webpack-plugin只會(huì)提取一個(gè)css文件，mini-css-extract-plugin會(huì)根據(jù)異步文件提取出來。
webpack.optimize.CommonsChunkPlugin
用途： 用于將頁面里的公共代碼提取出來，從而進(jìn)行優(yōu)化加載速度，該CommonsChunkPlugin只支持Webpack4之前。
安裝
該插件是Webpack內(nèi)置的，不需要安裝。
配置
main.js
import Vue from "vue"
webpack.config.js
module.exports = {
entry: {
main: "./main.js",
vendor: ["Vue"]
},
plugins: [
new Webpack.optimize.CommonsChunkPlugin({
name: "vendor",
filename: "[name].js"
}),
new Webpack.optimize.CommonsChunkPlugin({
name: "common",
chunks: ["vendor"],
filename: "[name].js"
})
]
}
上面配置中，我們把main.js及它里面的依賴文件把Vue.js提取出來進(jìn)行優(yōu)化，避免每次打包或者每次訪問其它頁面都加載一個(gè)該js文件, 我們先是把Vue基礎(chǔ)環(huán)境提取出來，因?yàn)榛A(chǔ)環(huán)境它幾乎不會(huì)改變，從而進(jìn)行提取優(yōu)化是必須的。再把Webpack運(yùn)行時(shí)的代碼也提取出來, 這樣vendor就再次打包也不會(huì)變化，可以走瀏覽器緩存
optimization.SplitChunks
用途： 該功能與上面的webpack.optimize.CommonsChunkPlugin一樣，只不過optimization.SplitChunks是webpack4之后推薦使用的
安裝
內(nèi)置的，不需要安裝。
配置
main.js
import Vue from "vue"
console.log(Vue)
import("./news")
news.js
import Vue from "vue"
console.log(Vue)
webpack.config.js
module.exports = {
mode: "development",
entry: {
main: "./main.js"
},
output: {
filename: "[name].js",
path: __dirname + "/dist"
},
optimization: {
splitChunks: {
chunks: "all"
}
},
}
上面配置中，splitChunks的chunks為all是對(duì)所有的chunk都生效，默認(rèn)只對(duì)async異步有效。
splitChunks默認(rèn)情況下也有自動(dòng)提取，默認(rèn)要求如下：
被提取的模塊來自 node_module目錄模塊大于30kb 按需加載時(shí)請(qǐng)求資源最大值小于等于5 首次加載時(shí)并行請(qǐng)求最大值小于等于3
DefinePlugin
用途： 用于注入全局變量，一般用在環(huán)境變量上。
安裝
無需安裝，webpack內(nèi)置
配置
webpack.config.js
const Webpack = require("webpack")
module.exports = {
plugins: [
new Webpack.DefinePlugin({
STR: JSON.stringify("蛙人"),
"process.env": JSON.stringify("dev"),
name: "蛙人"
})
]
}
上面配置中，DefinePlugin接收一個(gè)對(duì)象，里面的key值對(duì)應(yīng)一個(gè)value值，這個(gè)value值是一個(gè)代碼片段，可以看上面name那個(gè)，會(huì)報(bào)錯(cuò) 蛙人 is not defined，這里需要注意，value值必須是一個(gè)變量或代碼片段。
ProvidePlugin
用途： 用于定義全局變量，如100個(gè)頁面都引入vue，每個(gè)頁面都引入只會(huì)增加工作量，直接在webpackProvide掛載一個(gè)變量就行，不用再去一一引入。
安裝
無需安裝，webpack內(nèi)置
配置
webpack.config.js
const Webpack = require("webpack")
module.exports = {
plugins: [
new Webpack.ProvidePlugin({
"Vue": ["vue", "default"]
})
]
}
上面配置中，ProvidePlugin接收一個(gè)對(duì)象，key值是使用的變量，value值第一個(gè)參數(shù)是Vue模塊，第二個(gè)參數(shù)默認(rèn)取Es Module.default的屬性。import默認(rèn)引入進(jìn)來是一個(gè) Es Module的對(duì)象，里面有default這個(gè)屬性就是實(shí)體對(duì)象
hot-module-replacement-plugin
用途： 開啟熱模塊更新
安裝
無需安裝，webpack內(nèi)置
配置
webpack.config.js
const Webpack = require("webpack")
module.exports = {
plugins: [
new Webpack.HotModuleReplacementPlugin()
]
}
IgnorePlugin
用途： 用于過濾打包文件，減少打包體積大小。
安裝
無需安裝，webpack內(nèi)置
配置
webpack.config.js
const Webpack = require("webpack")
module.exports = {
plugins: [
new Webpack.IgnorePlugin(/.\/lib/, /element-ui/)
]
}
uglifyjs-webpack-plugin
用途： 用于壓縮js文件，針對(duì)webpack4版本以上。
安裝
cnpm install uglifyjs-webpack-plugin -D
配置
webpack.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
optimization: {
minimizer: [
new UglifyJsPlugin({
test: /\.js(\?.*)?$/i,
exclude: /node_modules/
})
]
}
}
copy-webpack-plugin
用途： 用于將文件拷貝到某個(gè)目錄下
安裝
cnpm i copy-webpack-plugin@6.4.1 -D
配置
webpack.config.js
const CopyWebpackPlugin=require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: "./main.js",
to: __dirname + "/dist/js",
toType: "dir"
}
]
})
]
}
上面配置中，將main.js拷貝到dist目錄下的js里，toType默認(rèn)是file，也可以設(shè)置為dir，因?yàn)槲疫@dist目錄下沒有js目錄。
optimize-css-assets-webpack-plugin
用途： 用于壓縮css樣式
安裝
cnpm i optimize-css-assets-webpack-plugin -D
配置
webpack.config.js
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")
module.exports = {
plugins: [
new OptimizeCssAssetsWebpackPlugin(),
]
}
imagemin-webpack-plugin
用途： 用于壓縮圖片
安裝
cnpm i imagemin-webpack-plugin -D
配置
webpack.config.js
const ImageminPlugin = require('imagemin-webpack-plugin').default
module.exports = {
plugins: [
new ImageminPlugin({
test: /\.(jpe?g|png|gif|svg)$/i
})
]
}
friendly-errors-webpack-plugin
用途： 美化控制臺(tái)，良好的提示錯(cuò)誤,。我們不想自己的終端啟動(dòng)亂糟糟的，比如這樣
安裝
cnpm i friendly-errors-webpack-plugin -D
配置
webpack.config.js
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const devServer = {
publicPath: "/",
port: 9527,
host: "localhost",
open: true,
hotOnly: true,
stats: 'errors-only'
}
module.exports = {
plugins: [
new FriendlyErrorsWebpackPlugin({
compilationSuccessInfo: {
notes: ['蛙人你好，系統(tǒng)正運(yùn)行在http://localhost:' + devServer.port]
},
clearConsole: true,
})
],
devServer
}
運(yùn)行完上面代碼。看如下結(jié)果
END
“分享、點(diǎn)贊、在看” 支持一波 
往期好文
《手把手教你寫一個(gè)Vue組件發(fā)布到npm且可外鏈引入使用》
《聊聊什么是CommonJs和Es Module及它們的區(qū)別》
《帶你輕松理解數(shù)據(jù)結(jié)構(gòu)之Map》
寫作不易
「點(diǎn)贊」+「在看」+「轉(zhuǎn)發(fā)」 謝謝支持
點(diǎn)個(gè)
在看
你最好看