1. 程式人生 > >require-ensure

require-ensure

require-ensure 

    • 說明: require.ensure在需要的時候才下載依賴的模組,當引數指定的模組都下載下來了(下載下來的模組還沒執行),便執行引數指定的回撥函式。require.ensure會建立一個chunk,且可以指定該chunk的名稱,如果這個chunk名已經存在了,則將本次依賴的模組合併到已經存在的chunk中,最後這個chunk在webpack構建的時候會單獨生成一個檔案。
    • 語法:require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])
      • dependencies: 依賴的模組陣列
      • callback: 回撥函式,該函式呼叫時會傳一個require引數
      • chunkName: 模組名,用於構建時生成檔案時命名使用
    • 注意點:requi.ensure的模組只會被下載下來,不會被執行,只有在回撥函式使用require(模組名)後,這個模組才會被執行。

 

 

這裡有三個引數,第一個引數是個陣列,標明依賴的模組,這些會提前載入,第二個是回撥函式,在這個回撥函式裡面的require的檔案會被單獨打包成一個chunk,不會和主檔案打包在一起,這樣就生成了兩個chunk,第一次載入時只加載主檔案,當點選時就會載入單獨打包的chunk。這裡的坑是,我想自己設定個名字叫oth,但是打包後仍然是webpack自動配置的名字,並且路徑也不對,這讓我鬱悶好久啊,官方文件直說配置個名字就可以單獨打包成自己寫的名字了,根本沒說還需要配置什麼,終於找了好久終於在網上看到有人說還需要配置chunkFilename,和publicPath,好吧去看這倆的文件解釋,才發現在介紹publicPath時提到了按需載入,並且說的不是很直接,意思就是按需載入單獨打包出來的chunk是以publicPath會基準來存放的。好吧,另外還要配置chunkFilename:[name].js這樣才會最終生成正確的路徑和名字

 

 

 

webpack-dev-server環境下,path、publicPath、區別與聯絡

path:指定編譯目錄而已(/build/js/),不能用於html中的js引用。

publicPath:虛擬目錄,自動指向path編譯目錄(/assets/ => /build/js/)。html中引用js檔案時,必須引用此虛擬路徑(但實際上引用的是記憶體中的檔案,既不是/build/js/也不是/assets/)。