注意:在webpack 2里面应该是不建议使用require.ensure()这个方法的。但是目前该方法仍然有效
webpack 在编译时,会静态地解析代码中的 require.ensure(),同时将模块添加到一个分开的 chunk 当中。这个新的 chunk 会被 webpack 通过 jsonp 来按需加载。
加载语法
require.ensure(dependencies: String[], callback: function(require), chunkName: String)
1、dependencies
这是一个字符串数组,通过这个参数,在所有的回调函数的代码被执行前,我们可以将所有需要用到的模块进行声明。
2、callback
当所有的依赖都加载完成后,webpack会执行这个回调函数。require 对象的一个实现会作为一个参数传递给这个回调函数。
3、chunkName
chunkName 是提供给这个特定的 require.ensure() 的 chunk 的名称。
通过提供 require.ensure() 不同执行点相同的名称,我们可以保证所有的依赖都会一起放进相同的 文件束(bundle)。
require.ensure() 的坑点
(1)、空数组作为参数(a.js 被 webpack 分开打包。)
require.ensure([], function(require){require('./a.js');});
(2)、依赖作为参数(a.js 和 b.js 都被打包到一起,而且从主文件束中拆分出来。但只有 b.js 的内容被执行。a.js 的内容仅仅是可被使用,但并没有被输出。想去执行 a.js,我们需要异步地引用它,如 require(‘./a.js’))
require.ensure(['./a.js'],function(require) {require('./b.js');});
(3)、单独打包成自己写的名字配置(需要配置chunkFilename,和publicPath。publicPath是按需加载单独打包出来的chunk是以publicPath会基准来存放的,chunkFilename:[name].js这样才会最终生成正确的路径和名字)
module.exports={entry:'./js/entry.js',output:{path:path.resolve(__dirname,"./dist"),filename:'js/a.bundle.js',publicPath:"./",chunkFilename:'js/[name].js'}}