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'