webpack散记---代码分割和懒加载

webpack methods
ES 2015 Loader spec
(1)webpack methods方法
    require.ensure  //可以动态加载依赖
        []:dependencies   //dependencies
        callback
        errorCallback
        chunkName
        require.include

(2)ES 2015 Loader Spec
    System.import()  -> import()
    import() -> Promise
    import().then()
    import(
      /*webpackChunkName:async-chunk-name*/
     /*webpackMode:lazy*/
     modulename
    )

(1)在pageA.js
     require.ensure([],function(){//只是加载进来
        var _ = require('lodash')//调用
        _.join(['1','2'],'3')
     },'vendor') //vender是定义的额模块名

    export default 'pageA'

(2)动态加载进来
     if(page ==='a'){
         require.ensure(['./subPageA'],function(){
               var a = require('./subPageA')
         })
     }else if(page === 'b'){
      //---------
    }

   或者 、、
   require.ensure(['./a','./b'],function(){
     console.log('--------')
   })

   //多个地方都用到moduleA的话，可以提前把他引入进来
   require.include('./moduleA')
   
   //修改发布路径
webpack.config.js
output :{
    padth:path.resolve(__dirname,'./dist'),
    publicPath:'./dist/',//动态加载的路径
}
    

（3）动态import加载 引入进来直接就执行了
    import(/*webpackChunkName:'appA'*/'./subPage').then(function(sub){
            //相当于重新指定chunkname的名字
    })
     

这个webpack   告一段落 ，后面  有时间继续更新

webpack散记---代码分割 和 懒加载

webpack散记---代码分割和懒加载