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