webpack中利用require.ensure()實現按需加載

webpack中的require.ensure()可以實現按需加載資源包括js,css等，它會給里面require的文件單獨打包，不和主文件打包在一起，webpack會自動配置名字，如0.js,1.js,但是這樣看着不是很直觀，所以要自己配置單獨打包的chunk名字，好吧開始踩坑

最初的代碼：

window.onclick=function(){
require.ensure([],function(){
var $=require('jquery')
console.log($("body"));
require("./c");
},"oth");
}

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

module.exports={
    entry:'./src/js/a.js',
    output:{
        path:path.resolve(__dirname,"./dist"),
        filename:'js/a.bundle.js',
        publicPath:"./",
        chunkFilename:'js/[name].js'
    }