webpack 异步加载原理

webpack提供require.ensure来进行异步加载（也称为代码分割），它会把js模块独立导出来生成.js文件，当我们使用到这个模块的时候，webpack会生成script dom元素，让浏览器来加载这个js文件。

使用commonsChunkPlugin

提取库代码：

var webpack = require('webpack');

module.exports = {

    entry:{

        index:  './index.js',    

        vendor:  ['react', 'lodash']

    },

    output: {

        path: 'lib',

        filename: '[name].[chunkhash].js'

    },

    plugins:{

        new webpack.outimize.commonsChunkPlugin({names:[vendor]})

    }

}  

提取公有代码：

var webpack = require('webpack');

module.exports = {

    entry:  {

        page1: './page1.js',

        page2: './page2.js'

    },

    output: {

        filename: '[name].js'

    },

    plugins: {

        new webpack.outimize.commonsChunkPlugin('common.js', ['page1', 'page2'])

    }

}

提取出来的代码，需要先引用，然后再去引用业务代码。