webpack 中,filename 和 chunkFilename 的區別是什麼?

来源:https://www.cnblogs.com/skychx/archive/2020/05/18/webpack-filename-chunkFilename.html
-Advertisement-
Play Games

`filename` 指**列在** `entry` 中,打包後輸出的文件的名稱。`chunkFilename` 指**未列在** `entry` 中,卻又需要被打包出來的文件的名稱。 ...


Webpack 有非常多的概念,很多名詞長得都差不多。我把這些分散在文檔和教程里的內容總結起來,寫了一份 webpack 中的易混淆知識點,目前看是全網獨一份,大家可以加個收藏,方便以後檢索和學習。

全集鏈接 ➡️ webpack 易混淆知識點

2.1 filename

filename 是一個很常見的配置,就是對應於 entry 裡面的輸入文件,經過webpack 打包後輸出文件的文件名。比如說經過下麵的配置,生成出來的文件名為 index.min.js

{
    entry: {
        index: "../src/index.js"
    },
    output: {
        filename: "[name].min.js", // index.min.js
    }
}

2.2 chunkFilename

chunkFilename 指未被列在 entry 中,卻又需要被打包出來的 chunk 文件的名稱。一般來說,這個 chunk 文件指的就是要懶載入的代碼。

比如說我們業務代碼中寫了一份懶載入 lodash 的代碼:

// 文件:index.js

// 創建一個 button
let btn = document.createElement("button");
btn.innerHTML = "click me";
document.body.appendChild(btn);

// 非同步載入代碼
async function getAsyncComponent() {
    var element = document.createElement('div');
    const { default: _ } = await import('lodash');

    element.innerHTML = _.join(['Hello!', 'dynamic', 'imports', 'async'], ' ');

    return element;
}

// 點擊 button 時,懶載入 lodash,在網頁上顯示 Hello! dynamic imports async
btn.addEventListener('click', () => {
    getAsyncComponent().then(component => {
        document.body.appendChild(component);
    })
})

我們的 webpack 不做任何配置,還是原來的配置代碼:

{
    entry: {
        index: "../src/index.js"
    },
    output: {
        filename: "[name].min.js", // index.min.js
    }
}

這時候的打包結果如下:

這個 1.min.js 就是非同步載入的 chunk 文件。文檔里這麼解釋:

output.chunkFilename 預設使用 [id].js 或從 output.filename 中推斷出的值([name] 會被預先替換為 [id][id].

文檔寫的太抽象,我們不如結合上面的例子來看:

output.filename 的輸出文件名是 [name].min.js[name] 根據 entry 的配置推斷為 index,所以輸出為 index.min.js

由於 output.chunkFilename 沒有顯示指定,就會把 [name] 替換為 chunk 文件的 id 號,這裡文件的 id 號是 1,所以文件名就是 1.min.js

如果我們顯式配置 chunkFilename,就會按配置的名字生成文件:

{
    entry: {
        index: "../src/index.js"
    },
    output: {
        filename: "[name].min.js",  // index.min.js
        chunkFilename: 'bundle.js', // bundle.js
    }
}

2.3 一句話總結:

filename列在 entry 中,打包後輸出的文件的名稱。

chunkFilename未列在 entry 中,卻又需要被打包出來的文件的名稱。



最後推薦一下我的個人公眾號:「滷蛋實驗室」,平時會分享一些前端技術和數據分析的內容,大家感興趣的話可以關註一波:


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 新聞 1. "6分鐘完整視頻提前看光谷歌新機Pixel 4a" 1. "統一推送官方解讀:消滅Android毒瘤、待機續航猛增43%" 1. "Google Play細化搜索結果:可按評分、編輯推薦、最新上線過濾" 教程 1. "瞭解一下,Android 10中的ART虛擬機(6)" 1. "使用 ...
  • 我們知道canvas畫布可以很方便的js原生支持轉為圖片格式並下載,但是svg矢量圖形則並沒有這方面原生的支持。研究過HighChart的svg圖形的圖片下載機制,其實現原理大體是瀏覽器端收集SVG代碼信息,併發送到到伺服器端,由後端程式轉換成圖片格式後,以流的形式反射給瀏覽器端下載。 最近在項目中 ...
  • 【目錄】 一、BOM操作 1、window 對象 2、window 子對象 3、history 對象 4、location 對象(掌握) 5、彈出框 6、計時器相關 二、DOM操作 1、DOM相關概念 2、查找標簽 3、節點操作 4、獲取值操作 5、class、css操作 (以下是使用mac筆記本中 ...
  • 如果大家看過一些 webpack4 優化的文章,一定會出現 dll 動態鏈接庫。它以配置之複雜讓眾多初學者記憶猶新。今天我會以一個學習者的角度去一步一步探討 webpack dll 的配置,最後得出一個完美的解決方案。 ...
  • 在 React Native 開發中,最容易遇到的對性能有一定要求場景就是長列表了。在日常業務實踐中,優化做好後,千條數據渲染還是沒啥問題的。 ...
  • sourse-map ,裡面都有個 map 了,肯定是映射的意思。sourse-map 就是一份源碼和轉換後代碼的映射文件。 ...
  • hash 計算與整個項目的構建相關;chunkhash 計算與同一 chunk 內容相關;contenthash 計算與文件內容本身相關。 ...
  • `webpackChunkName` 是為預載入的文件取別名,`webpackPrefetch` 會在瀏覽器閑置下載文件,`webpackPreload` 會在父 chunk 載入時並行下載文件。 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...