webpack多頁(yè)面開發(fā)與懶加載hash解決方案

之前討論了webpack的hash與chunkhash的區(qū)別以及各自的應(yīng)用場(chǎng)景，如果是常規(guī)單頁(yè)面應(yīng)用的話，上篇文章提供的方案是沒有問(wèn)題的。但是前端項(xiàng)目復(fù)雜多變，應(yīng)對(duì)復(fù)雜多頁(yè)面項(xiàng)目時(shí)，我們不得不繼續(xù)踩webpack的hash坑。

在進(jìn)入正文之前先解釋一下所謂的常規(guī)單頁(yè)面和復(fù)雜多頁(yè)面是什么意思。

這兩個(gè)并非專業(yè)術(shù)語(yǔ)，而是筆者實(shí)在想不出更恰當(dāng)?shù)恼f(shuō)法了，見諒。

1. 項(xiàng)目類型

1.1 常規(guī)單頁(yè)面項(xiàng)目

常規(guī)單頁(yè)面符合以下條件：

• 可以存在多個(gè)主js文件和css文件；
• 每個(gè)js文件都是同步打包的，也就是說(shuō)不存在與主文件相關(guān)聯(lián)的懶加載文件。

與主文件關(guān)聯(lián)的懶加載文件指的是邏輯與主文件完全無(wú)關(guān)的js文件，這類文件不參與主文件打包。比如主文件main.js中有以下代碼：

window.onload = function(){ var script = document.createElement('script');
    script.src = '//static.daojia.com/bi.js'; document.head.appendChild(script);
}

其中bi.js的內(nèi)部邏輯與main.js為任何關(guān)聯(lián)，它對(duì)于main.js來(lái)說(shuō)就是一個(gè)字符串而已。

與之相對(duì)應(yīng)的是與主文件有邏輯關(guān)系的模塊文件，比如以下代碼：

window.onload = function(){ require.ensure([],function
        		
網(wǎng)友評(píng)論