一、entry
用来定义入口文件,有三种格式:
1、字符串
entry: './src/app.js'
这种格式相当于
entry: {
main: './src/app.js'
}
如果不指定打包的文件名,默认会打包成main.js
2、数组
entry: ['./src/app.js', './src/index.js']
这种情况会将两个文件都打包到main.js,这种方式适合于想要多个依赖文件一起注入,并且将它们的依赖导向到一个“chunk”
3、对象
entry: {
app: './src/app.js',
main: './src/index.js'
}
这种情况会打包成两个文件,文件名对应key值
总结:
其实这三种写法原理都是一样的,前两种写法是第三种的简写,也就是说,如果不提供key值,就会默认对应到“main",打包后的文件名也会对应key值。
二、entry结合webpack插件CommonsChunkPlugin的用法:
1、单入口,可用vendors(名字可以随意取)指定一些公用的库,打包到vendors.js
entry: {
app: './src/app.js',
vendors: ['react', 'react-dom']
}
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors' //名字要对应entry
});
2、多入口,提取入口文件的公共代码,打包到vendors.js
entry: {
app: './src/app.js',
index: './src/index.js'
}
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors',//指定打包的文件名
chunk: ['app'] //指定要提取公共代码的入口文件,没有这一项配置可默认提取所有的入口文件
minChunks:2 //指定要打包的文件数,具体用法后面补充
});