################webpack 打包公共代码###############
提取公用代码：模块化开发，公共模块
1.减少代码的冗余 很多页面都有的公共代码
2.提高用户的加载速度 公共代买加载一次多处使用
################CommonsChunkPlugin 公共块插件###############
使用 webpack CommonsChunkPlugin 插件将公共的代码提取出来
配置: 这个插件是webpack自带的
module.exports = {
entry:{'app':'app.ts'},
output:{filename:'[name].bundle.js'},
module:{
rulse:[
{
test:/\.tsx?$ /,
use:{
loader:'ts-loader'
}
}
]
}
plugins:[
new webpack.optimize.CommonsChunkPlugin(option)
]
}
################结构###############
node_modules
dist
src
moduleA.js
pageA.js
pageB.js
subPageA.js
subPageB.js
package.json
webpack.config.js
################webpack 提取公用代码案例###############
这里提取公共代码需要注意的是，需要多个entry,只有多个entry的时候才会提取
pageA,pageB 同时导入了 subPageA,subPageB 所以他们被打包到 common.bundle.js中
将第三方引入的代码 打包到公共代码中 name : 'vendor',minChunks:Infinity
pageA.js 内容如下
import './subPageA'
import './subPageB'
这里引入的是第三方依赖需要npm安装的，打包到common公共代码中，并且是和 webpack自己生产的代码在一起，形成共同的依赖
import * as _ from 'lodash'
export default 'pageA' 使用es6模块化语法 暴露自己
pageB.js 内容如下
import './subPageA'
import './subPageB'
import * as _ from 'lodash'
export default 'pageB'
subPageA.js
import './moduleA'
export default 'subPageA' 对自己做标识
subPageB.js
import './moduleA'
export default 'subPageB'
moduleA.js
export default 'moduleA'
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'
},
plugins:[
这个实例打包 pageA,pageB公共的代码
new webpack.optimize.CommonsChunkPlugin({
name:'common', 公共代码打包插件
minChunks:2, 到其他模块中找公共代码
指定需要打包的公共代码的页面
chunks:['pageA','pageB']
}),
这个实例打包 依赖的第三方的包 npm 安装的，比如lodash，jq
new webpack.optimize.CommonsChunkPlugin({
第三方依赖包 方在数组wendor中集体打包
这里要注意顺序，第三方依赖包数组 vendor在前，webpack生成代码在后
name : ['vendor','manifest'],
minChunks:Infinity
}),
/* 将 name:[] 改成数组形式可以合并代码
新实例化，可以将第三方依赖包与webpack生成代码分开打包
new webpack.optimize.CommonsChunkPlugin({
name : 'manifest', 随意的一个名字
minChunks:Infinity
})
*/]
}
