webpack中實現按需加載

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

最初的代碼：

1 2 3 4 5 6 7

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這樣纔會最終生成正確的路徑和名字

1 2 3 4 5 6 7 8

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

注意：

這個是wbpack1的用法，後續版本中被import()替代了哦。