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

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

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

正文

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

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

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

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

圖片打包（asset/resource）

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

src/
    addImg.js
    cat.jpeg
    index.js

addImg.js 的內容如下

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 一個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文件，會發(fā)現(xiàn)圖片已經(jīng)在頁面上渲染了，再觀察打包之后的dist文件夾，圖片數(shù)據(jù)也在其中，這就是以assert/resource方式打包的結果，簡單講圖片打包進入了dist文件夾, 這和后邊的asset/inline(后面會介紹)的方式有直接區(qū)別。

publicPath

剛才打包的結果，如果打開瀏覽器控制臺，可以看見img元素的src地址指向了一個本地的絕對路徑

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

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

asset/inline 模塊

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

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

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

asset 模塊

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

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