如何區分和理解webpack中的output.filename 和output.chunkFilename
阿新 • • 發佈:2018-11-05
如何區分和理解webpack中的output.filename 和output.chunkFilename
filename應該比較好理解,就是對應於entry裡面生成出來的檔名。比如:
{
entry: {
"index": "pages/index.jsx"
},
output: {
filename: "[name].min.js",
chunkFilename: "[name].min.js"
}
}
生成出來的檔名為index.min.js。
chunkname我的理解是未被列在entry中,卻又需要被打包出來的檔案命名配置。什麼場景需要呢?我們專案就遇到過,在按需載入(非同步)模組的時候,這樣的檔案是沒有被列在entry中的,如使用CommonJS的方式非同步載入模組:
require.ensure(["modules/tips.jsx"], function(require) {
var a = require("modules/tips.jsx");
// ...
}, 'tips');
非同步載入的模組是要以檔案形式載入哦,所以這時生成的檔名是以chunkname配置的,生成出的檔名就是tips.min.js。
(require.ensure() API的第三個引數是給這個模組命名,否則 chunkFilename: “[name].min.js” 中的 [name] 是一個自動分配的、可讀性很差的id)