webpack中实现按需加载

时间 2019-12-05

标签 webpack 实现按需加载繁體版

原文原文链接

webpack中的require.ensure()能够实现按需加载资源包括js,css等，它会给里面require的文件单独打包，不和主文件打包在一块儿，webpack会自动配置名字，如0.js,1.js,可是这样看着不是很直观，因此要本身配置单独打包的chunk名字，好吧开始踩坑javascript

最初的代码：css

 
         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这样才会最终生成正确的路径和名字java

 
         module.exports={ 
        
         entry: 
         './src/js/a.js' 
         , 
        
         output:{ 
        
         path:path.resolve(__dirname, 
         "./dist" 
         ), 
        
         filename: 
         'js/a.bundle.js' 
         , 
        
         publicPath: 
         "./" 
         , 
        
         chunkFilename: 
         'js/[name].js' 
        
         }

注意：jquery

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