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 告一段落 ,后面 有时间继续更新