摘要：之輸出的最后就是為了得到打包結(jié)果。在這里可以看到很多相似，但是有不同含義的名次，如和，和，那他們有什么區(qū)別呢而這里的又是什么意思呢將多個(gè)模塊打包之后的代碼集合稱為。在這樣打包的話，會(huì)報(bào)錯(cuò)。所以就想搞明白這兩個(gè)的區(qū)別到底是什么。

webpack的最后就是為了得到打包結(jié)果。

那這是一個(gè)怎么樣的過(guò)程，不同的配置，會(huì)有什么樣的結(jié)果呢？

本文的原文在我的博客中:github.com/RachelRen/b…,歡迎star。

首先從最簡(jiǎn)單的配置開(kāi)始output。告訴webpack在哪里打包應(yīng)用程序。

	output: {
	    path: path.resolve(__dirname, "build"),
	    filename: "js/[name].js",
	    publicPath: "/",
	    chunkFilename:"js/[name].chunk.js",
		//chunkFilename:"js/[name].[chunkhash:8].chunk.js",
	},

在這里可以看到很多相似，但是有不同含義的名次，如filename和chunkFilename，hash和chunkhash，那他們有什么區(qū)別呢？

而這里的chunk又是什么意思呢？

webpack 將多個(gè)模塊打包之后的代碼集合稱為 chunk。 這兩個(gè)的區(qū)別：chunkFilename 是無(wú)入口的chunk在輸出時(shí)的文件名稱。chunkFilename只用于在指定在運(yùn)行過(guò)程中生成的chunk在輸出時(shí)的文件名稱。

但在webpack4以上的時(shí)候，發(fā)現(xiàn)在entry中配置的入口文件，打包的結(jié)果是index.chunckfile.js,屬于chunkFilename，因?yàn)樵O(shè)置了

optimization: {
    splitChunks: {
      	chunks: "all",
     	name: "common",
    },
    runtimeChunk: { 
     	name: "runtime",
    }
},

當(dāng)去掉runtimeChunk這個(gè)配置時(shí)，那么入口文件，又會(huì)變成filename。主要原因是

通過(guò)設(shè)置 optimization.splitChunks.chunks: "all" 來(lái)啟動(dòng)默認(rèn)的代碼分割配置項(xiàng)。通過(guò)滿足下面的條件，webpack會(huì)自動(dòng)打包c(diǎn)hunks

當(dāng)前模塊是公共模塊（多處引用）或者模塊來(lái)自 node_modules

當(dāng)前模塊大小大于 30kb

如果此模塊是按需加載，并行請(qǐng)求的最大數(shù)量小于等于 5

如果此模塊在初始頁(yè)面加載，并行請(qǐng)求的最大數(shù)量小于等于 3

optimization.runtimeChunk

通過(guò)設(shè)置 optimization.runtimeChunk: true 來(lái)為每一個(gè)入口默認(rèn)添加一個(gè)只包含 runtime 的 chunk(webpack會(huì)添加一個(gè)只包含運(yùn)行時(shí)(runtime)額外代碼塊到每一個(gè)入口)。

output: {
	filename: "js/[name].[chunkhash:8].js",
	path: path.join(__dirname, "./build"),
    publicPath: "/",
    chunkFilename:"js/[name].[chunkhash:8].chunk.js",
},

在webpack 4這樣打包的話，會(huì)報(bào)錯(cuò)。

ERROR in chunk runtime [entry]
js/[name].[chunkhash:8].js
Cannot use [chunkhash] or [contenthash] for chunk in "js/[name].[chunkhash:8].js" (use [hash] instead)

所以就想搞明白這兩個(gè)的區(qū)別到底是什么。

[chunkhash] is replaced by the hash of the chunk.

chunkhash代表的是chunk的hash值。chunk在webpack中的就是模塊的意思，那么chunkhash就是根據(jù)模塊內(nèi)容計(jì)算得出的hash值。

[hash] is replaced by the hash of the compilation.

hash 是compilation的hash值。

compilation對(duì)象代表某個(gè)版本的資源對(duì)應(yīng)的編譯進(jìn)程。在使用webpack的development中間件時(shí)，每次檢測(cè)到項(xiàng)目文件有變動(dòng)時(shí)會(huì)創(chuàng)建一個(gè)compilation，所以能夠針對(duì)改動(dòng)生成全新的編譯文件。compilation對(duì)象包含當(dāng)前模塊資源，編譯文件，有改動(dòng)的文件盒監(jiān)聽(tīng)依賴的所有信息。

compiler和compilation的區(qū)別是。 compiler是配置完備的webpack環(huán)境。compiler只在webpack啟動(dòng)時(shí)構(gòu)建一次，由webpack組合所有的配置構(gòu)建生成。compiler是不變的webpack環(huán)境，是針對(duì)webpack的。而compilation是針對(duì)隨時(shí)可變的項(xiàng)目文件，只要有文件改動(dòng)，compilation就會(huì)被重新創(chuàng)建。

compilation在項(xiàng)目中任何一個(gè)文件改動(dòng)后就會(huì)被重新創(chuàng)建，然后webpack計(jì)算新的compilation的hash值，這個(gè)hash值便是hash。

hash是compilation對(duì)象(所用compilation對(duì)象？)計(jì)算所得，而不是具體的項(xiàng)目文件計(jì)算所得。所以以上配置的編譯輸出文件，所有的文件名都會(huì)使用相同的hash指紋。

chunkhash是根據(jù)具體模塊文件的內(nèi)容計(jì)算所得的hash值，所以某個(gè)文件的改動(dòng)只會(huì)影響它本身的hash指紋，不會(huì)影響其他文件

接上文所述，webpack的hash字段是根據(jù)每次編譯compilation的內(nèi)容計(jì)算所得，也可以理解為項(xiàng)目總體文件的hash值，而不是針對(duì)每個(gè)具體文件的。

所以如果用optimization.splitChunks.runtimeChunk生成的文件，就是以hash作為文件后綴的runtime.[hash].js,而且每次文件修改，都會(huì)生成一個(gè)新的文件。

hash是跟整個(gè)項(xiàng)目的構(gòu)建相關(guān)，只要項(xiàng)目里有文件更改，整個(gè)項(xiàng)目構(gòu)建的hash值都會(huì)更改，并且全部文件都共用相同的hash值

總之一句話： hash是整體的文件計(jì)算所得，chunkhash是具體模塊文件所得。

現(xiàn)在很多系統(tǒng)都是SPA，當(dāng)發(fā)展越來(lái)越龐大的時(shí)候，js的拆分就越來(lái)越重要的。那么怎么拆分js就很重要了。

分離主要有三種方式：

入口起點(diǎn)：使用 entry 配置手動(dòng)地分離代碼。

防止重復(fù)：使用 SplitChunksPlugin 去重和分離 chunk。

動(dòng)態(tài)導(dǎo)入：通過(guò)模塊中的內(nèi)聯(lián)函數(shù)調(diào)用來(lái)分離代碼。

這種方式是最簡(jiǎn)單，最直觀的方式。但是有一些他的缺點(diǎn)：

如果入口 chunk 之間包含一些重復(fù)的模塊，那些重復(fù)模塊都會(huì)被引入到各個(gè) bundle 中。

這種方法不夠靈活，并且不能動(dòng)態(tài)地將核心應(yīng)用程序邏輯中的代碼拆分出來(lái)。

SplitChunksPlugin 插件可以將公共的依賴模塊提取到已有的 entry chunk 中，或者提取到一個(gè)新生成的 chunk。在webpack 4.0 之前是用CommonsChunkPlugin來(lái)做代碼分離的

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    names: ["vendor", "manifest"]
  })
]

在webpack 4.0之后，就通過(guò)optimization.splitChunks來(lái)分離代碼了。

optimization: {
    splitChunks: {
       chunks: "all"
    }
}

如果系統(tǒng)很龐大，將代碼一次性載入，就顯得太過(guò)于強(qiáng)大，最好能做到根據(jù)我們的需求來(lái)選擇性地加載我們需要的代碼。

webpack 提供了2種方式來(lái)拆分代碼。

符合 ECMAScript 提案 的 import() 語(yǔ)法 來(lái)實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入。（import() 調(diào)用會(huì)在內(nèi)部用到 promises。）

則是 webpack 的遺留功能，使用 webpack 特定的 require.ensure

在配置過(guò)程中，也會(huì)遇到這兩個(gè)概念。

publicPath： 用來(lái)為項(xiàng)目中的所有資源指定一個(gè)基礎(chǔ)路徑。使用的是相對(duì)路徑。

filename:"[name]_[chunkhash:8].js"
publicPath: "https://cdn.example.com/assets/"

那么發(fā)布上線的時(shí)候，路徑就是:

靜態(tài)資源最終訪問(wèn)路徑 = output.publicPath + 資源loader或插件等配置路徑

path: 配置輸出文件存放在本地的目錄，必須是 string 類型的絕對(duì)路徑,通常通過(guò) Node.js 的 path 模塊去獲取絕對(duì)路徑：

path: path.resolve(__dirname, "dist_[hash]")

Webpack中hash與chunkhash的區(qū)別，以及js與css的hash指紋解耦方案

腦闊疼的webpack按需加載

代碼分離