webpack实现代码方式是主要是通过模块的引入方式
1.require.ensure
//进行代码分割
require.ensure(['lodash'],function(){
var _ = require('lodash');//上边的require.ensure只会引入进来,但是并不会执行,再次require才会执行。
},'vendor')
或者:
if(page=='subPageA'){
require.ensure(['./subPageA'],function(){
var subPageA=require('subPageA');
},'subPageA')
}else if(page=='subPageB'){
require.ensure(['./subPageB'],function(){
var subPageA=require('subPageB');
},subPageB)
}
或者:
require.ensure(['./subPageA','./subPageB'],function(){
var subPageA=require('subPageA');
var subPageB=require('subPageB');
},common)
//common表示这个模块的名字
但是仅仅这样配置并不能把公共js抽离出来,在多页面应用中可以通过new webpack.optimize.CommonsChunkPlugin这个plugin来实现,但是对于单页面来说,就需要借助require.include了
require.include('./moduleA')
if(page=='subPageA'){
require.ensure(['./subPageA'],function(){
var subPageA=require('subPageA');
},'subPageA')
}else if(page=='subPageB'){
require.ensure(['./subPageB'],function(){
var subPageA=require('subPageB');
},subPageB)
}
这样就会把公共模块moduleA给抽离出来
2.import
import与require.ensure最大的区别就是,他在引入的时候会直接执行,而不需要在此require了
import('./subPageA').then(function(){
})
但是这样打包出来的是没有chunkname的,怎么添加chunkname呢?需要webpack3+的魔法注释
import(/*webpackChunkName:'subPageA'*/'./subPageA').then(function(){
})
3 .异步加载公共模块
var webpack=require('webpack')
var path=require('path')
module.exports={
entry:{
'pageA':'./src/pageA',
'pageB':'./src/pageB',
'vendor':['lodash']
},
output:{
path:path.resolve(__dirname,'./dist'),
filename:'[name].bundle.js',
publicPath:'./dist/',
chunkFilename:'[name].chunk.js'
},
plugins:[
new webpack.optimize.CommonsChunkPlugin({
async:'async-common',
//要一部提取公共模块,可以不用指定name,
children:true,
//children表示并不仅仅从当前页面抽离公共代码,当前页面的子页面也要抽取
minChunks:2
})
]
}
pageA.js:
import * as _ from 'lodash'
var page = "subpageA"
if(page==-"subpageA"){
import(/*webpackChunkName:'subpageA'*/'./subpageA').then(function(subpageA){
console.log('subpageA');
})
}else if(page==-"subpageB"){
import(/*webpackChunkName:'subpageB'*/'./subpageB').then(function(subpageB){
console.log('subpageB');
})
}
export default 'pageA'
pageB:
import * as _ from 'lodash'
var page = "subpageB"
if(page==-"subpageA"){
import(/*webpackChunkName:'subpageA'*/'./subpageA').then(function(subpageA){
console.log('subpageA');
})
}else if(page==-"subpageB"){
import(/*webpackChunkName:'subpageB'*/'./subpageB').then(function(subpageB){
console.log('subpageB');
})
}
export default 'pageB'