快捷導(dǎo)航

webpack5新特性Asset?Modules資源模塊詳解

更新時(shí)間：2023年03月02日 11:22:16 作者：大眾浴池之大眾

這篇文章主要為大家介紹了webpack5新特性Asset?Modules資源模塊詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

webpack 可以將很多類型的文件寫入最后打包的js文件，寫入的方法有兩種，一個(gè)是 Asset Modules 另一個(gè)是 Loaders

這一篇我們就來討論 Asset Modules。Asset Modules(資源模塊)是webpack5的新特性，它允許使用資源文件（字體，圖標(biāo)等）而無需配置額外 loader, webpack低版本的處理方式以及詳情參考官方文檔。

資源模塊類型(asset module type)，通過添加 4 種新的模塊類型, 下面引入官文的一部分來直接介紹。

asset/resource 發(fā)送一個(gè)單獨(dú)的文件并導(dǎo)出 URL。之前通過使用 file-loader 實(shí)現(xiàn)。
asset/inline 導(dǎo)出一個(gè)資源的 data URI。之前通過使用 url-loader 實(shí)現(xiàn)。
asset/source 導(dǎo)出資源的源代碼。之前通過使用 raw-loader 實(shí)現(xiàn)。
asset 在導(dǎo)出一個(gè) data URI 和發(fā)送一個(gè)單獨(dú)的文件之間自動(dòng)選擇。之前通過使用 url-loader，并且配置資源體積限制實(shí)現(xiàn)。

圖片打包（asset/resource）

將一張圖片(jpg/png/jpeg)放在工程文件夾里, 然后寫一個(gè)加載圖片的函數(shù)，生產(chǎn)一個(gè)圖片元素，設(shè)置其src等屬性，再掛載到body上。文件目錄如下

src/
    addImg.js
    cat.jpeg
    index.js

addImg.js 的內(nèi)容如下

import CatImg from './cat.jpeg';
function addImg () {
    const img = document.createElement('img');
    img.alt = 'Cat';
    img.width = 300;
    img.src = CatImg;
    const body = document.querySelector('body');
    body.appendChild(img);
}
export default addImg;

這里import 一個(gè)jpeg后綴的文件，webpack是不知道該如何處理的，我們需要通過wepack.config.js配置

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist') 
    },
    mode: 'none',
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg)/,
                type: 'asset/resource'
            }
        ]
    }
}

npm run build之后在瀏覽器打開html文件，會(huì)發(fā)現(xiàn)圖片已經(jīng)在頁面上渲染了，再觀察打包之后的dist文件夾，圖片數(shù)據(jù)也在其中，這就是以assert/resource方式打包的結(jié)果，簡單講圖片打包進(jìn)入了dist文件夾, 這和后邊的asset/inline(后面會(huì)介紹)的方式有直接區(qū)別。

publicPath

剛才打包的結(jié)果，如果打開瀏覽器控制臺(tái)，可以看見img元素的src地址指向了一個(gè)本地的絕對(duì)路徑

這個(gè)路徑是如何指定的呢？是通過output屬性下的publicPath, 其默認(rèn)值是 "auto", 可以試一下配置了是通過output屬性下的publicPath: "auto"和剛才的打包結(jié)果是一樣的，那么如果想使用相對(duì)路徑，在本例中用html文件的相對(duì)路徑去指定圖片的src publicPath: 'dist/',打包后同樣可以成功渲染圖片，但是觀察其img的src的指向已經(jīng)發(fā)生了變化，使用的相對(duì)路徑。

比如實(shí)際項(xiàng)目，靜態(tài)資源會(huì)打包到cdn服務(wù)器上，那么可以配置 publicPath 為一個(gè)具體的cdn地址，如 http://somecdn.com/someasset/, 那么其靜態(tài)資源路徑前綴就會(huì)是這個(gè)地址。

asset/inline 模塊

接著上面的部分，inline主要區(qū)別的于 resource是打包的結(jié)果，inline會(huì)將文件直接以base64的方式寫入最后產(chǎn)出的bundle.js 一般情況下，對(duì)于一些svg文件使用inline的方式打包是比較合理的，當(dāng)然對(duì)于較大的圖片也不是不行，只不過最后bundle.js的體積會(huì)變大，這在生產(chǎn)環(huán)境不是很理想。

改寫對(duì)于圖片類數(shù)據(jù)打包的方式為 type: 'asset/inline' 可以從控制臺(tái)看出打出的包體積變大了，且打開bundle.js看的話會(huì)看見base64的部分

那么結(jié)論就是這兩種打包方式各有利弊，inline雖然把數(shù)據(jù)寫入到js文件中，但也減少了一次網(wǎng)絡(luò)請(qǐng)求。還是要根據(jù)實(shí)際的生產(chǎn)需求來決策，理論上一些小的svg要寫到bundle中，而大圖是分包部署在cdn服務(wù)上比較合理。

asset 模塊

上面的兩種設(shè)定都指定了一種絕對(duì)的方法，那么有沒有更靈活的方式呢？就是asset類型的處理方式。將圖片文件處理的方式改為 type: 'asset', 這會(huì)根據(jù)資源的大小來決定是以inline的方式還是以recource的方式進(jìn)行打包，其默認(rèn)值閥值是8kb, 如果文件大小小于8kb,那么文件將以inline的方式進(jìn)行打包，反之則相當(dāng)于recource的方式。當(dāng)然我也可以改寫閾值:

module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg)/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 3 * 1024 // 3kb
                    }
                }
            }
        ]
    }