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

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

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

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

1. 項目類型

1.1 常規(guī)單頁面項目

常規(guī)單頁面符合以下條件:

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

與主文件關(guān)聯(lián)的懶加載文件指的是邏輯與主文件完全無關(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),它對于main.js來說就是一個字符串而已。

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

window.onload = function(){ require.ensure([],function
        		

延伸閱讀

學(xué)習(xí)是年輕人改變自己的最好方式-Java培訓(xùn),做最負(fù)責(zé)任的教育,學(xué)習(xí)改變命運,軟件學(xué)習(xí),再就業(yè),大學(xué)生如何就業(yè),幫大學(xué)生找到好工作,lphotoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)學(xué)習(xí)是年輕人改變自己的最好方式