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