webpack中实现按需加载-白红宇

webpack中实现按需加载

阅读量：4583 次

发布时间：2019-06-09

本文共 1005 字，大约阅读时间需要 3 分钟。

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'

}

注意：

这个是wbpack1的用法，后续版本中被import()替代了哦。

转载于:https://www.cnblogs.com/xuanbiyijue/p/7953498.html

你可能感兴趣的文章