【webpack核心】- 9、入口 和 出口的最佳實踐

1、一個頁面一個JS

源碼結構

|—— src
    |—— pageA   頁面A的代碼目錄
        |—— index.js 頁面A的啓動模塊
        |—— ...
    |—— pageB   頁面B的代碼目錄
        |—— index.js 頁面B的啓動模塊
        |—— ...
    |—— pageC   頁面C的代碼目錄
        |—— main1.js 頁面C的啓動模塊1 例如：主功能
        |—— main2.js 頁面C的啓動模塊2 例如：實現訪問統計的額外功能
        |—— ...
    |—— common  公共代碼目錄
        |—— ...

webpack配置

module.exports = {
    entry:{
        pageA: "./src/pageA/index.js",
        pageB: "./src/pageB/index.js",
        pageC: ["./src/pageC/main1.js", "./src/pageC/main2.js"]
    },
    output:{
        filename:"[name].[chunkhash:5].js"
    }
}

這種方式適用於頁面之間的功能差異巨大、公共代碼較少的情況，這種情況下打包出來的最終代碼不會有太多重複

打包出來的最終代碼有太多重複會有什麼問題，會導致傳輸量增加。

問題：單獨開一個common chunk打包公共的模塊（A、B、C文件依賴comon公共代碼部分）？
因爲打包出來的common文件沒有暴露任何內容，所以A文件沒辦法取到common裏依賴的模塊,所以公共代碼，必須打包時放到a文件裏

所以：如果是獨立的公共功能，可以用一個chunk抽離出來，單獨打包； 如果是被依賴的公共功能，不能用chunk抽離出來

2、一個頁面多個JS

源碼結構

|—— src
    |—— pageA   頁面A的代碼目錄
        |—— index.js 頁面A的啓動模塊
        |—— ...
    |—— pageB   頁面B的代碼目錄
        |—— index.js 頁面B的啓動模塊
        |—— ...
    |—— statistics   用於統計訪問人數功能目錄
        |—— index.js 啓動模塊
        |—— ...
    |—— common  公共代碼目錄
        |—— ...

webpack配置

module.exports = {
    entry:{
        pageA: "./src/pageA/index.js",
        pageB: "./src/pageB/index.js",
        statistics: "./src/statistics/index.js"
    },
    output:{
        filename:"[name].[chunkhash:5].js"
    }
}

這種方式適用於頁面之間有一些獨立、相同的功能，專門使用一個chunk抽離這部分JS有利於瀏覽器更好的緩存這部分內容。

思考：爲什麼不使用多啓動模塊的方式？

entry:{    
	pageA:["./src/pageA/index.js","./src/statistics/index.js],    
	pageB: ["./src/pageB/index.js","./src/statistics/index.js] 
},

每個chunk多個入口模塊，最後各種打成一個文件，這樣做可以，但是會有**增加傳輸量的問題，瀏覽器沒法緩存公共代碼**

3、單頁應用

所謂單頁應用，是指整個網站（或網站的某一個功能塊）只有一個頁面，頁面中的內容全部靠JS創建和控制。 vue和react都是實現單頁應用的利器。

源碼結構

|—— src
    |—— subFunc   子功能目錄
        |—— ...
    |—— subFunc   子功能目錄
        |—— ...
    |—— common  公共代碼目錄
        |—— ...
    |—— index.js

webpack配置

module.exports = {
    entry: "./src/index.js",
    output:{
        filename:"index.[hash:5].js"
    }
}