一文詳解webpack中l(wèi)oader與plugin的區(qū)別
一、Loader
1.loader的作用:
webpack 只能直接處理 javascript 格式的代碼。任何非 js 文件都必須被預(yù)先處理轉(zhuǎn)換為 js 代碼,才可以參與打包。loader(加載器)就是這樣一個(gè)代碼轉(zhuǎn)換器。
2.loader的工作原理:
它由 webpack 的 loader runner
執(zhí)行調(diào)用,接收原始資源數(shù)據(jù)作為參數(shù)(當(dāng)多個(gè)加載器聯(lián)合使用時(shí),上一個(gè)loader的結(jié)果會(huì)傳入下一個(gè)loader),最終輸出 javascript 代碼(和可選的 source map)給 webpack 做進(jìn)一步編譯。
3. Loader 執(zhí)行順序
1). loader類型
pre: 前置loader normal: 普通loader inline: 內(nèi)聯(lián)loader post: 后置loader
2). 執(zhí)行優(yōu)先級(jí)
4類 loader 的執(zhí)行優(yōu)級(jí)為:pre > normal > inline > post
。 相同優(yōu)先級(jí)的 loader 執(zhí)行順序?yàn)椋?code>從右到左,從下到上。 3. 前綴的作用
內(nèi)聯(lián) loader 可以通過添加不同前綴,跳過其他類型 loader。
!
跳過 normal loader。 -!
跳過 pre 和 normal loader。 !!
跳過 pre、 normal 和 post loader。 這些前綴在很多場(chǎng)景下非常有用。
4.如何開發(fā)一個(gè)loader
loader 是一個(gè)導(dǎo)出一個(gè)函數(shù)的 node 模塊。
1). 最簡(jiǎn)單的 loader
當(dāng)只有一個(gè) loader 應(yīng)用于資源文件時(shí),它接收源碼作為參數(shù),輸出轉(zhuǎn)換后的 js 代碼。
// loaders/simple-loader.js module.exports = function loader (source) { console.log('simple-loader is working'); return source; } 揭秘webpack loader - 知乎
style-loader 最終需返回一個(gè) js
腳本:在腳本中創(chuàng)建一個(gè) style
標(biāo)簽,將 css
代碼賦給 style
標(biāo)簽,再將這個(gè) style
標(biāo)簽插入 html
的 head
中。
二、Plugin
1.plugin解決其他的更多的自動(dòng)化打包工作
plugin的范圍更大,作用也更強(qiáng)。
可以自動(dòng)打包生成html文件,并自動(dòng)引入打包后的結(jié)果 打包前清除原dist文件中的內(nèi)容 可以將我們需要的但是并沒有引入靜態(tài)資源一同打包到dist文件中 對(duì)打包的結(jié)果進(jìn)行特殊的處理 壓縮打包后的內(nèi)容,對(duì)打包結(jié)果可以進(jìn)行更細(xì)的自定義操作
2.自定義插件
1)在造輪子之前我們必須要知道它的原理,plugin相比loader還有一點(diǎn)很大的不同,loader只工作于模塊的加載環(huán)節(jié),而plugin即可可以作用于打包過程的每一個(gè)環(huán)節(jié),有點(diǎn)像vue中的生命周期,我們可以在一個(gè)合適的周期進(jìn)行相應(yīng)的操作。webpack的插件機(jī)制就是我們常說的鉤子機(jī)制,整個(gè)打包過程可以分為多個(gè)環(huán)節(jié),為了便于插件的擴(kuò)展,webpack機(jī)會(huì)在每個(gè)環(huán)節(jié)都提供了一個(gè)鉤子,我們就可以利用這些鉤子來造輪子。
2)webpack為我們提供了哪些hooks呢?
entry-option 初始化 option run 開始編譯 compile 真正開始的編譯,在創(chuàng)建 compilation 對(duì)象之前 compilation 生成好了 compilation 對(duì)象 make 從 entry 開始遞歸分析依賴,準(zhǔn)備對(duì)每個(gè)模塊進(jìn)行 build after-compile 編譯 build 過程結(jié)束 emit 在將內(nèi)存中 assets 內(nèi)容寫到磁盤文件夾之前 after-emit 在將內(nèi)存中 assets 內(nèi)容寫到磁盤文件夾之后 done 完成所有的編譯過程 failed 編譯失敗的時(shí)候 …
3)webpack要求我們的插件必須是一個(gè)函數(shù),或者是一個(gè)包含apply的對(duì)象。一般來說我們都會(huì)定義一個(gè)類型,然后在這個(gè)類型中定義apply方法,最后再通過這個(gè)類型來創(chuàng)建一個(gè)實(shí)例對(duì)象去使用這個(gè)插件。
const pluginName = 'myplugin' module.exports = class myplugin { apply(){} }
這個(gè)apply方法接收一個(gè)叫compiler的參數(shù)對(duì)象,這個(gè)對(duì)象是webpack工作中最核心的對(duì)象,包含了此次打包構(gòu)建的所有配置信息,我們就可以通過這個(gè)對(duì)象去注冊(cè)鉤子函數(shù)。
const pluginName = 'myplugin' module.exports = class myplugin { apply(compiler){ compiler.hooks.run.tap(pluginName, () =>{ { console.log('開始編譯'); } }) } }
我們想在run階段輸出‘開始編譯’這句話,在webpack.config.js中引入并配置
const myplugin = require('./myplugin') plugins:[ new myplugin() ]
常見的Loader和Plugin
loader:
style-loader :在html文件中創(chuàng)建標(biāo)簽,將js中的樣式插入
css-loader:將css文件變成commonjs模塊加載到j(luò)s中,輸出為樣式字符串
less-loader:將less轉(zhuǎn)換為css
url-loader+內(nèi)置file-loader:處理圖片資源(不能處理html中的圖片)
html-loader:處理html中的圖片,負(fù)責(zé)引入img從而能被url-loader處理
{ test: /\.(jpg|png|gif)$/, use: { loader: 'url-loader', options:{ limit:5*1024, esModule: false, name:[hash:10].[ext] //給圖片文件重命名,取哈希值前10位加上原來的擴(kuò)展名 } }, type:'javascript/auto' //在webpack4的基礎(chǔ)上加上這句話 }, { test: /\.(htm|html)$/, loader: 'html-loader', }
file-loader:打包其他資源,如字體圖標(biāo),不需要優(yōu)化壓縮
(webpack5之后,我們可以直接使用資源模塊類型(asset module type),來替代上面的這些loader)
plugin:
html-webpack-plugin:在build中新建一個(gè)index.html文件,自動(dòng)引入打包輸出的所有資源(js/css).可以配置 template為新html文件創(chuàng)建模板
ignore-plugin:用來忽略一些文件
mini-css-extract-plugin:將css單獨(dú)打包成一個(gè)文件的css
clean-webpack-plugin:用于清除目錄文件,在生產(chǎn)環(huán)境中編譯文件的時(shí)候,用它來講dist的目錄清除干凈,然后再生成新的
serviceworker-webpack-plugin:離線緩存功能
webpack-parallel-uglify-plugin:多線程壓縮js代碼,加快構(gòu)建速度
以上就是一文詳解webpack中l(wèi)oader與plugin的區(qū)別的詳細(xì)內(nèi)容,更多關(guān)于webpack中l(wèi)oader plugin區(qū)別的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript深拷貝方法structuredClone使用
這篇文章主要為大家介紹了JavaScript深拷貝方法structuredClone使用示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02arrify 轉(zhuǎn)數(shù)組實(shí)現(xiàn)示例源碼解析
這篇文章主要為大家介紹了arrify 轉(zhuǎn)數(shù)組實(shí)現(xiàn)示例源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12微信小程序 時(shí)間格式化(util.formatTime(new Date))詳解
這篇文章主要介紹了微信小程序 時(shí)間格式化(util.formatTime(new Date))詳解的相關(guān)資料,這里附實(shí)例,一目了然很容易解決,需要的朋友可以參考下2016-11-11JavaScript 對(duì)象詳細(xì)整理總結(jié)
這篇文章主要介紹了JavaScript 對(duì)象詳細(xì)整理總結(jié)的相關(guān)資料,需要的朋友可以參考下2016-09-09WebAssembly增強(qiáng)前端應(yīng)用技巧詳解
這篇文章主要為大家介紹了WebAssembly增強(qiáng)前端應(yīng)用技巧示例詳解,<BR>有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02