欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一文詳解webpack中l(wèi)oader與plugin的區(qū)別

 更新時間:2023年02月02日 09:42:56   作者:耀_  
這篇文章主要為大家介紹了一文詳解webpack中l(wèi)oader與plugin的區(qū)別詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

一、Loader

1.loader的作用:

webpack 只能直接處理 javascript 格式的代碼。任何非 js 文件都必須被預先處理轉換為 js 代碼,才可以參與打包。loader(加載器)就是這樣一個代碼轉換器。

2.loader的工作原理:

它由 webpack 的 loader runner 執(zhí)行調用,接收原始資源數據作為參數(當多個加載器聯合使用時,上一個loader的結果會傳入下一個loader),最終輸出 javascript 代碼(和可選的 source map)給 webpack 做進一步編譯。

3. Loader 執(zhí)行順序

1). loader類型

pre: 前置loader normal: 普通loader inline: 內聯loader post: 后置loader

2). 執(zhí)行優(yōu)先級

4類 loader 的執(zhí)行優(yōu)級為:pre > normal > inline > post 。 相同優(yōu)先級的 loader 執(zhí)行順序為:從右到左,從下到上。 3. 前綴的作用

內聯 loader 可以通過添加不同前綴,跳過其他類型 loader。

! 跳過 normal loader。 -! 跳過 pre 和 normal loader。 !! 跳過 pre、 normal 和 post loader。 這些前綴在很多場景下非常有用。

4.如何開發(fā)一個loader

loader 是一個導出一個函數的 node 模塊。

1). 最簡單的 loader

當只有一個 loader 應用于資源文件時,它接收源碼作為參數,輸出轉換后的 js 代碼。

// loaders/simple-loader.js module.exports = function loader (source) { console.log('simple-loader is working'); return source; } 揭秘webpack loader - 知乎

style-loader 最終需返回一個 js 腳本:在腳本中創(chuàng)建一個 style 標簽,將 css 代碼賦給 style 標簽,再將這個 style 標簽插入 htmlhead 中。

二、Plugin

1.plugin解決其他的更多的自動化打包工作

plugin的范圍更大,作用也更強。

可以自動打包生成html文件,并自動引入打包后的結果 打包前清除原dist文件中的內容 可以將我們需要的但是并沒有引入靜態(tài)資源一同打包到dist文件中 對打包的結果進行特殊的處理 壓縮打包后的內容,對打包結果可以進行更細的自定義操作

2.自定義插件

1)在造輪子之前我們必須要知道它的原理,plugin相比loader還有一點很大的不同,loader只工作于模塊的加載環(huán)節(jié),而plugin即可可以作用于打包過程的每一個環(huán)節(jié),有點像vue中的生命周期,我們可以在一個合適的周期進行相應的操作。webpack的插件機制就是我們常說的鉤子機制,整個打包過程可以分為多個環(huán)節(jié),為了便于插件的擴展,webpack機會在每個環(huán)節(jié)都提供了一個鉤子,我們就可以利用這些鉤子來造輪子。

2)webpack為我們提供了哪些hooks呢?

entry-option 初始化 option run 開始編譯 compile 真正開始的編譯,在創(chuàng)建 compilation 對象之前 compilation 生成好了 compilation 對象 make 從 entry 開始遞歸分析依賴,準備對每個模塊進行 build after-compile 編譯 build 過程結束 emit 在將內存中 assets 內容寫到磁盤文件夾之前 after-emit 在將內存中 assets 內容寫到磁盤文件夾之后 done 完成所有的編譯過程 failed 編譯失敗的時候 …

3)webpack要求我們的插件必須是一個函數,或者是一個包含apply的對象。一般來說我們都會定義一個類型,然后在這個類型中定義apply方法,最后再通過這個類型來創(chuàng)建一個實例對象去使用這個插件。

const pluginName = 'myplugin'
module.exports =  class myplugin {
    apply(){}
}

這個apply方法接收一個叫compiler的參數對象,這個對象是webpack工作中最核心的對象,包含了此次打包構建的所有配置信息,我們就可以通過這個對象去注冊鉤子函數。

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)建標簽,將js中的樣式插入

css-loader:將css文件變成commonjs模塊加載到js中,輸出為樣式字符串

less-loader:將less轉換為css

url-loader+內置file-loader:處理圖片資源(不能處理html中的圖片)

html-loader:處理html中的圖片,負責引入img從而能被url-loader處理

{
    test: /\.(jpg|png|gif)$/,
    use: {
        loader: 'url-loader',
        options:{
            limit:5*1024,
            esModule: false,
            name:[hash:10].[ext] //給圖片文件重命名,取哈希值前10位加上原來的擴展名
        }
    },
    type:'javascript/auto' //在webpack4的基礎上加上這句話
    },
{
    test: /\.(htm|html)$/,
    loader: 'html-loader',
}

file-loader:打包其他資源,如字體圖標,不需要優(yōu)化壓縮

(webpack5之后,我們可以直接使用資源模塊類型(asset module type),來替代上面的這些loader)

plugin:

html-webpack-plugin:在build中新建一個index.html文件,自動引入打包輸出的所有資源(js/css).可以配置 template為新html文件創(chuàng)建模板

ignore-plugin:用來忽略一些文件

mini-css-extract-plugin:將css單獨打包成一個文件的css

clean-webpack-plugin:用于清除目錄文件,在生產環(huán)境中編譯文件的時候,用它來講dist的目錄清除干凈,然后再生成新的

serviceworker-webpack-plugin:離線緩存功能

webpack-parallel-uglify-plugin:多線程壓縮js代碼,加快構建速度

以上就是一文詳解webpack中l(wèi)oader與plugin的區(qū)別的詳細內容,更多關于webpack中l(wèi)oader plugin區(qū)別的資料請關注腳本之家其它相關文章!

相關文章

最新評論