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'
}

  

上一篇:require.js模块化管理和加载js(按需加载)简单实例教学


下一篇:CSS学习笔记day1