對(duì)于webpack配置中filename和chunkFilename在使用中有些不懂的地方，研究之后記錄如下。

filename: string | function

此選項(xiàng)決定了每個(gè)輸出 bundle 的名稱。這些 bundle 將寫入到 output.path 選項(xiàng)指定的目錄下。

對(duì)于單個(gè)入口起點(diǎn)，filename 會(huì)是一個(gè)靜態(tài)名稱。

chunkFilename: string

此選項(xiàng)決定了非入口(non-entry) chunk文件的名稱。

上面就是關(guān)于filename和chunkFilename的官文解釋。

首先什么是入口？

目前可以理解為entry字段就是提供的應(yīng)用的入口文件。（這個(gè)解釋并不全面）

開始做出如下嘗試：

目錄結(jié)構(gòu)：

nodule_modules/

dist/

src/

? --index.js

? --a.js

webpack.config.js

文件webpack.config.js

var path = require('path')module.exports = {mode: 'development',entry: './src/index.js',output: {path: path.resolve(__dirname, '../dist'),filename: '[name].[contenthash:6].js',chunkFilename: '[name].[contenthash:4].js'} }

上面配置中，整個(gè)應(yīng)用的入口就是文件/src/index.js。

文件src/index.js

import('./a.js') console.log('index')

文件src/a.js

console.log('a')

打包后的結(jié)果可以看出來index.js對(duì)應(yīng)的main.conenthash.js是6位的，a.js對(duì)應(yīng)的1.contenthash.js是4位的。

這和我們預(yù)想的結(jié)果一樣，filename設(shè)置的是入口文件的文件名，chunkFilename設(shè)置的是非入口文件的文件名。動(dòng)態(tài)加載的文件a.js并不是入口文件。

我們知道webpack打包的文件分為三大模塊，一個(gè)是第三方庫(kù)，這部分比較穩(wěn)定，可以打包到一起，利于緩存。一個(gè)是業(yè)務(wù)代碼，基本上每次發(fā)版都會(huì)修改。最后一個(gè)是webpack生成的runtime和manifest，每次打包都會(huì)改變。

現(xiàn)在我們的代碼中只涉及到了自己的業(yè)務(wù)代碼，并沒有第三方庫(kù)代碼，即使這樣我們也可以分離出webpack生成runtime和manifest。

修改配置如下：

var path = require('path')module.exports = {mode: 'development',entry: './src/index.js',output: {path: path.resolve(__dirname, '../dist'),filename: '[name].[contenthash:6].js',chunkFilename: '[name].[contenthash:4].js'},optimization: {runtimeChunk: {name: 'manifest'}} }

可以看到entry對(duì)應(yīng)生成的文件main.js文件的hash變成了4位，但是entry明明就是規(guī)定的是應(yīng)用的入口文件，對(duì)應(yīng)的文件名配置應(yīng)該是filename，對(duì)應(yīng)的hash位數(shù)應(yīng)該是6位。

但現(xiàn)實(shí)它就是4位的。

并且還能看出來新分離出來的manifest.js的hash是6位的。

這其實(shí)也說明了webpack打包的應(yīng)用本質(zhì)上的入口并不是entry字段提供的文件，應(yīng)用的入口是webpack自己生成的runtime。是通過runtime + manifest才將我們的代碼和第三方庫(kù)組織起來并且正常運(yùn)行的。

所以webpack打包的應(yīng)用入口是自己生成的runtime + manifest。

沒有提取manifest的時(shí)候entry生成對(duì)應(yīng)的main.js的hash位數(shù)是正確的。這其實(shí)只是一個(gè)巧合，因?yàn)檫@個(gè)情況下整個(gè)引用的入口就是main.js，因?yàn)閙anifest + runtime并沒有從main,js中分離出來。所以入口文件對(duì)應(yīng)的就是main.js，然后filename的設(shè)置是正確應(yīng)用在了main.js上。

從上面的分析中可以推倒出，如果我們把manifest + runtime內(nèi)聯(lián)到HTML文件中，那么將不會(huì)有6位hash的文件被生成，因?yàn)椴]有入口的js文件被生成。修改配置文件如下：

var path = require('path') var HtmlWebpackPlugin = require('html-webpack-plugin') var ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')module.exports = {mode: "development",entry: './src/index.js',output: {path: path.resolve(__dirname, './dist'),filename: '[name].[contenthash:6].js',chunkFilename: '[name].[contenthash:4].js'},optimization: {runtimeChunk: {name: "manifest",},},plugins: [new HtmlWebpackPlugin({template: './src/index.html'}),new ScriptExtHtmlWebpackPlugin({inline: /manifest..*.js$/})] }

從上圖中可以看到確實(shí)沒有6位hash的文件被生成了。

總結(jié)：

output.filename規(guī)定的是應(yīng)用入口文件的名稱，而output.entry提供的是webpack打包的入口。某種情況下這兩個(gè)入口是統(tǒng)一的。

通過webpack打包后的應(yīng)用入口是webpack生成的manifest + runtime。當(dāng)沒有分離manifest + runtime的時(shí)候，這部分生成的內(nèi)容會(huì)和entry字段提供的文件相同。

參考

輸出(output)

manifest

總結(jié)

以上是生活随笔為你收集整理的wbepack中output.filename和output.chunkFilename的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。