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'])
}
}
提取出来的代码,需要先引用,然后再去引用业务代码。