1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > ensure函数_webpack的require.ensure()

ensure函数_webpack的require.ensure()

时间:2021-12-28 23:04:05

相关推荐

ensure函数_webpack的require.ensure()

注意:在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'}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。