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

转载于:https://www.cnblogs.com/qdcnbj/p/10043137.html

require-ensure相关推荐

require.ensure与require AMD的区别
转载自 webpack: require.ensure与require AMD的区别 webpack: require.ensure与require AMD的区别简介 require-ensure ...
ensure函数_webpack的require.ensure()
注意:在webpack 2里面应该是不建议使用require.ensure()这个方法的.但是目前该方法仍然有效 webpack 在编译时,会静态地解析代码中的 require.ensure(),同时 ...
ensure函数_webpack中利用require.ensure()实现按需加载
webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...
vue项目优化之按需加载组件-使用webpack require.ensure
使用 vue-cli构建的项目,在默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash]. ...
vue按需加载组件-webpack require.ensure(转)
vue按需加载组件-webpack require.ensure 2017年07月28日 09:58:07 A_山水子农阅读数:23245 标签: vue按需加载组件按需加载webpackrequi ...
webpack的 require.ensure 使用
// 批量导入.md文件import GROUPS from '/';GROUPS.map(item => { return item.component = LOAD_DOCS_MAP[&qu ...
webpack中利用【require.ensure()】和【import()】实现按需加载
1.require.ensure()themes为变量,设计多个文件名根据themes动态变化可以映入不同less文件如下require.ensure([], function (require) { ...
ensure函数_webpack中require.ensure()实现按需加载
webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...
require.ensure实现webpack按需加载
webpack使用require.ensure将vue页面打包成独立的chunk文件,也可以将多个vue页面合并成一个chunk文件,以实现生产环境按需加载. 下面给出官网的require.ensur ...
require.ensure的用法;异步加载-代码分割;
webpack异步加载的原理 webpack ensure相信大家都听过.有人称它为异步加载,也有人说做代码切割,那这个家伙到底是用来干嘛的?其实说白了,它就是把js模块给独立导出一个.js文件的, ...

require-ensure

require-ensure相关推荐

最新文章

热门文章