Loader是用于特定的模塊類型進(jìn)行轉(zhuǎn)換，Plugin可以用于執(zhí)行更加廣泛的任務(wù)，比如打包優(yōu)化、資源管理、環(huán)境變量注入等。
1. CleanWebpackPlugin
前面我們演示的過(guò)程中，每次修改了一些配置，重新打包時(shí)，都需要手動(dòng)刪除dist文件夾，我們可以借助于一個(gè)插件來(lái)幫助我們完成，這個(gè)插件就是CleanWebpackPlugin。
安裝
yarn add clean-webpack-plugin -D
配置
webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
plugins: [
new CleanWebpackPlugin()
]
}
2. HtmlWebpackPlugin
HtmlWebpackPlugin用于生成 index.html。
安裝
yarn add html-webpack-plugin -D
配置
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new HtmlWebpackPlugin({
title: 'webpack app demo'
})
]
}
配置完成重新打包后，我們會(huì)發(fā)現(xiàn)，現(xiàn)在自動(dòng)在dist文件夾中，生成了一個(gè)index.html的文件, 該文件中也自動(dòng)添加了我們打包的bundle.js文件。
這個(gè)文件是如何生成的呢？
默認(rèn)情況下是根據(jù)ejs的一個(gè)模板來(lái)生成的，在html-webpack-plugin的源碼中，有一個(gè)default_index.ejs模塊。
2.1 自定義HTML模板
如果我們想在自己的模塊中加入一些比較特別的內(nèi)容，類似于vue-cli的模板，比如添加一個(gè)noscript標(biāo)簽，在用戶的JavaScript被關(guān)閉時(shí)，給予響應(yīng)的提示；比如在開(kāi)發(fā)vue或者react項(xiàng)目時(shí)，我們需要一個(gè)可以掛載后續(xù)組件的根標(biāo)簽 <div id="app"></div>。
這個(gè)我們需要一個(gè)屬于自己的index.html模塊：
<!DOCTYPE html>
<html lang="">
<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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
上面的代碼中，會(huì)有一些類似這樣的語(yǔ)法<% 變量 %>，這個(gè)是EJS模塊填充數(shù)據(jù)的方式。在配置HtmlWebpackPlugin時(shí)，我們可以添加如下配置：
- template：指定我們要使用的模塊所在的路徑
- title：在進(jìn)行htmlWebpackPlugin.options.title讀取時(shí)，就會(huì)讀到該信息
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new HtmlWebpackPlugin({
title: 'webpack app demo',
template: "./public/index.html"
})
]
}
但是，這個(gè)時(shí)候編譯還是會(huì)報(bào)錯(cuò)，因?yàn)樵谖覀兊哪K中還使用到一個(gè)BASE_URL的常量。
這是因?yàn)樵诰幾gtemplate模塊時(shí)，有一個(gè)BASE_URL：
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
但是我們并沒(méi)有設(shè)置過(guò)這個(gè)常量值，所以會(huì)出現(xiàn)沒(méi)有定義的錯(cuò)誤。
這個(gè)時(shí)候我們可以使用DefinePlugin插件。
DefinePlugin允許在編譯時(shí)創(chuàng)建配置的全局常量，是一個(gè)webpack內(nèi)置的插件（不需要單獨(dú)安裝）
配置如下：
webpack.config.js
const { DefinePlugin } = require('webpack');
module.exports = {
plugins: [
new DefinePlugin({
BASE_URL: '"./"'
})
]
}
3. CopyWebpackPlugin
在vue-cli的打包過(guò)程中，如果我們將一些文件放到public的目錄下，那么這個(gè)目錄會(huì)被復(fù)制到dist文件夾中。這個(gè)復(fù)制的功能，我們可以使用CopyWebpackPlugin來(lái)完成。
*安裝
yarn add copy-webpack-plugin -D
配置
webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: "public", // 從哪里復(fù)制
globOptions: {
// 忽略的文件
ignore: [
"**/index.html",
"**/.DS_Store", // mac自動(dòng)生成的文件
"**/abc.txt"
]
}
}
]
})
]
}
4. MiniCssExtractPlugin
MiniCssExtractPlugin可以幫助我們將css提取到一個(gè)獨(dú)立的css文件中，該插件需要在webpack4+才可以使用。
首先，我們需要安裝 mini-css-extract-plugin：
yarn add mini-css-extract-plugin -D
配置rules和plugins：
