超級(jí)詳細(xì)的webpack?Plugin講解
一、pulgin 的作用
pulgin 就是“插件”的意思，主要目的就是解決 loader 無(wú)法實(shí)現(xiàn)的事情，loader 只是用作于將特定的模塊進(jìn)行轉(zhuǎn)換，而 pulgin 可以用于執(zhí)行更加廣泛的任務(wù)，比如打包優(yōu)化、資源管理、環(huán)境變量注入等
pulgin 是貫穿 webpack 整個(gè)編譯周期的，運(yùn)行在 webpack 的不同階段（鉤子 / 生命周期）
二、pulgin 配置方式
通常情況下，pulgin 的配置都是通過(guò) webpack.config.js 配置文件導(dǎo)出對(duì)象中 plugins 屬性傳入 new 實(shí)例對(duì)象
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過(guò) npm 安裝
const webpack = require('webpack'); // 訪問(wèn)內(nèi)置的插件
module.exports = {
...
// 配置 plugins
plugins: [
new webpack.ProgressPlugin(),
new HtmlWebpackPlugin({ template: './src/index.html' }),
],
};三、pulgin 的本質(zhì)
pulgin 本質(zhì)上是一個(gè)具有 apply 方法 javascript 對(duì)象，而他的這個(gè) apply 方法會(huì)被 webpack compiler 階段調(diào)用，并且在整個(gè)編譯生命周期都可以訪問(wèn) compiler 對(duì)象
const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
class ConsoleLogOnBuildWebpackPlugin {
apply(compiler) {
compiler.hooks.run.tap(pluginName, (compilation) => {
console.log('webpack 構(gòu)建過(guò)程開(kāi)始！');
});
}
}
module.exports = ConsoleLogOnBuildWebpackPlugin;關(guān)于整個(gè)編譯生命周期鉤子：
- entry-option ：初始化 option
- run
- compile： 真正開(kāi)始的編譯，在創(chuàng)建 compilation 對(duì)象之前
- compilation ：生成好了 compilation 對(duì)象
- make 從 entry 開(kāi)始遞歸分析依賴，準(zhǔn)備對(duì)每個(gè)模塊進(jìn)行 build
- after-compile： 編譯 build 過(guò)程結(jié)束
- emit ：在將內(nèi)存中 assets 內(nèi)容寫到磁盤文件夾之前
- after-emit ：在將內(nèi)存中 assets 內(nèi)容寫到磁盤文件夾之后
- done： 完成所有的編譯過(guò)程
- failed： 編譯失敗的時(shí)候
四、常見(jiàn)的 pulgin
4-1 html-webpack-plugin
作用：
- 利用 HtmlWebpackPlugin 插件自動(dòng)生成 html 文件，并且對(duì)打包后的 js 文件做了一個(gè)引入
- HtmlWebpackPlugin 原理是通過(guò)自帶默認(rèn)的 ejs 模版去生成的，當(dāng)然也可以自定義模版，在 html 模板中，可以通過(guò)
<%=htmlWebpackPlugin.options.XXX%>的方式獲取配置的值
// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
...
plugins: [
new HtmlWebpackPlugin({
title: "webpack案例",
template: "./public/index.html", // 指定生成的 html 模版
}),
]
};4-2 clean-webpack-plugin
作用：每次打包時(shí)候，CleanWebpackPlugin 插件就會(huì)自動(dòng)把上一次打的包刪除
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
...
plugins: [
new CleanWebpackPlugin()
]
}4-3 mini-css-extract-plugin
作用：提取 CSS 到一個(gè)單獨(dú)的文件中
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
...,
module: {
rules: [
{
test: /.s[ac]ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
...,
new MiniCssExtractPlugin({
filename: '[name].css'
}),
...
]
}4-4 DefinePlugin
作用：DefinePlugin 允許在編譯時(shí)創(chuàng)建配置的全局常量，是一個(gè) webpack 內(nèi)置的插件（不需要單獨(dú)安裝）
const { DefinePlugun } = require('webpack')
module.exports = {
...
plugins:[
new DefinePlugin({
BASE_URL: '"./"' // 等價(jià)于 const BASE_URL = "./" 他的賦值方式有點(diǎn)奇葩
}),
]
}這時(shí)候編譯template模塊的時(shí)候，就能通過(guò)下述形式獲取全局對(duì)象
<!-- BASE_URL 是一個(gè)全局的常量，是通過(guò) DefinePlugin 這個(gè)插件去定義的 --> <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
4-5 copy-webpack-plugin
作用：CopyWebpackPlugin 是一個(gè)復(fù)制文件的插件，復(fù)制文件或者目錄到指定區(qū)域，比如 vue 的打包過(guò)程中，如果我們將一些文件放到 public 的目錄下，那么這個(gè)目錄會(huì)被復(fù)制到 dist 文件夾中
new CopyWebpackPlugin({
// 通過(guò) CopyWebpackPlugin 插件將 public 中的文件復(fù)制到打包后的文件夾下
// patterns 是匹配的意思
patterns: [
{
from: "public", // 設(shè)置從哪一個(gè)源中開(kāi)始復(fù)制
to: "build" // 可以省略，默認(rèn)是復(fù)制到打包輸出的路徑，會(huì)根據(jù) output
globOptions: {
ignore: ['**/DS_Store', '**/index.html', '**/abc.txt'] // ** 表示的是 from 的文件夾
}
// globOptions：設(shè)置一些額外的選項(xiàng)，其中可以編寫需要忽略的文件,
//比如.DS_Store：mac目錄下回自動(dòng)生成的一個(gè)文件；.index.html：也不需要復(fù)制，因?yàn)槲覀円呀?jīng)通過(guò)HtmlWebpackPlugin完成了index.html的生成
}
]
})總結(jié)
到此這篇關(guān)于webpack Plugin講解的文章就介紹到這了,更多相關(guān)webpack Plugin講解內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript是一門多范式的編程語(yǔ)言，其中函數(shù)式編程成為了一種受歡迎的范式之一，本文將帶您深入了解JavaScript函數(shù)式編程的核心概念和技術(shù)，需要的可以參考一下2023-06-06
微信小程序?qū)崿F(xiàn)tabbar凹凸圓選中動(dòng)畫(huà)效果實(shí)例
小程序日益增多的情況下,UI風(fēng)格顯得越來(lái)越重要,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)tabbar凹凸圓選中動(dòng)畫(huà)效果的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
Express框架中_router?對(duì)象數(shù)據(jù)結(jié)構(gòu)使用詳解
這篇文章主要為大家介紹了Express框架中_router的對(duì)象數(shù)據(jù)結(jié)構(gòu)使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
JS結(jié)合WebSocket實(shí)現(xiàn)實(shí)時(shí)雙向通信
WebSocket 是一種在 Web 應(yīng)用程序中實(shí)現(xiàn)實(shí)時(shí)、雙向通信的協(xié)議,在本文中,我們將深入介紹 WebSocket 的原理、用法以及一些實(shí)際應(yīng)用場(chǎng)景,x需要的可以參考下2023-11-11
關(guān)于ES6新特性最常用的知識(shí)點(diǎn)匯總
日常開(kāi)發(fā)中寫的 JavaScript 代碼,會(huì)用到ES6的部分新特性,所以下面這篇文章主要給大家介紹了關(guān)于ES6新特性最常用的知識(shí)點(diǎn),文章總結(jié)的非常全面,需要的朋友可以參考下2021-11-11
JavaScript 中如何實(shí)現(xiàn)大文件并行下載
本文將介紹如何利用 async-pool 這個(gè)庫(kù)提供的 asyncPool 函數(shù)來(lái)實(shí)現(xiàn)大文件的并行下載。2021-05-05
substring是從中截取一段字符串,在組成一個(gè)新的字符串,這篇文章主要介紹了js中substring使用示例小結(jié),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
學(xué)習(xí)Typescript通常是一個(gè)重新發(fā)現(xiàn)的過(guò)程。本文將總結(jié)幾個(gè)技巧，幫助你充分發(fā)揮語(yǔ)言的潛力，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-01-01
簡(jiǎn)單實(shí)現(xiàn)js頁(yè)面切換功能
這篇文章主要為大家詳細(xì)介紹了如何實(shí)現(xiàn)js頁(yè)面切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
js函數(shù)名與form表單元素同名沖突的問(wèn)題
本篇文章主要是對(duì)js函數(shù)名與form表單元素同名沖突的問(wèn)題進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03