require.ensure（['']， callback，chunkName）
// []路径可省略
// var _ = require('lodash') 必须
require.ensure(['lodash'], function() {
var _ = require('lodash')
}, 'vendor')
import() // 返回promies对象
import().then()
import(
/* webpackChunkName: async-chunk-name */
/* webpackMode: lazy */
modulename
)
其他模块：
公共模块：moduleA.js代码
export default 'moduleA'
子模块：subPageA.js代码
import './moduleA'
console.log('subPage:::')
export default 'subPageA'
子模块：subPageB.js代码
import './moduleA'
export default 'subPageB'
场景1.分离业务代码 和 第三方依赖
1.pageA.js（lodash为第三方依赖）
require.ensure(['lodash'], function() {
var _ = require('lodash')
}, 'vendor')
// import()方式
import(/* webpackChunkName:'vendor' */'lodash').then(function(lodash) {
console.log(lodash)
})
在使用import（）方式时会报如下错误：
webpack dynamic import出错: SyntaxError: ‘import’ and ‘export’ may only appear at the top level
此处需要安装babel插件：
"plugins": [
"syntax-dynamic-import"
]
2.webpack.config.js配置：
var webpack = require('webpack')
var path = require('path')
module.exports = {
entry: {
// app: './src/app.js',
'pageA': './src/pageA'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].bundle.js',
chunkFilename: '[name].chunk.js',
publicPath: './dist/'
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
// options: {
// presets: ['env']
// }
},
exclude: '/node_modules/',
}
]
},
}
使用场景2：分离业务代码 和 业务公共代码 和 第三方依赖
1.pageA.js
// moduleA为业务公共代码 公共代码块需在入口文件提前引入
require.include('./moduleA')
// subPageA：业务代码
require.ensure(['./subPageA'], function() {
var subPageA = require('./subPageA')
}, 'subPageA')
// lodash第三方依赖
require.ensure(['lodash'], function() {
var _ = require('lodash')2.webpack.config.js配置：
var webpack = require('webpack')
var path = require('path')
module.exports = {
entry: {
// app: './src/app.js',
'pageA': './src/pageA',
// 'pageB': './src/pageB',
// 'vendor': ['lodash']
},
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].bundle.js',
chunkFilename: '[name].chunk.js',
publicPath: './dist/'
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
// options: {
// presets: ['env']
// }
},
exclude: '/node_modules/',
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader/useable'
},
{
loader: 'css-loader'
}
]
}
]
},
}1.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'
2.pageB.js代码
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'
3.webpack.config.js代码
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',
chunkFilename: '[name].chunk.js',
publicPath: './dist/'
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
// options: {
// presets: ['env']
// }
},
exclude: '/node_modules/',
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader/useable'
},
{
loader: 'css-loader'
}
]
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
async: 'async-common',
minChunks: 2,
children: true,
}),
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest'],
minChunks: Infinity
}),
// new webpack.optimize.CommonsChunkPlugin({
// name: 'vendor',
// minChunks: Infinity
// })
]
}| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) | 黑马程序员IT技术论坛 X3.2 |