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/）。