我们在上一篇已经初次了解了webpack相关的基础概念，并进行了简单的 webpack 单入口单出口配置：
// ...
module.exports = {
// ...
entry: './src/index.js',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'build')
}
}
那么，我们项目中要面对多入口和出口的情况，怎么办呢？
这里有3种配置方案：
1. 数组形式
数组形式配置入口，数组中的所有入口文件将会形成一个chunk，名称是默认的，输出也只有一个bundle。
// ...
module.exports = {
// ...
entry: ['./src/index.js', './src/main.js'],
output: {
filename: 'build.js',
output: path.resolve(__dirname, 'build')
}
}
上面的配置输出的情况是这样的：
build
|__ build.js
# build.js是index.js和main.js两个文件编译的输出产物
2. 对象形式
对象形式配置入口，对象的属性是chunk的名称，有几个属性，就生成几个chunk，输出几个bundle，输出的bundle名称对应chunk名称。
// ...
module.exports = {
// ...
entry: {
one: './src/index.js',
two: './src/main.js'
},
output: {
// [name]是一个变量，它的值对应entry的属性名，也就是各个chunk的名字
// 所以输出的bundle名称对应chunk名称
filename: '[name].js',
output: path.resolve(__dirname, 'build')
}
}
上面的配置输出的情况是这样的：
build
|__ one.js
|__ two.js
# one.js是index.js编译的输出产物
# two.js是main.js编译的输出产物
3. 数组对象混合形式
数组中的所有文件形成一个chunk，名称是对应的属性名，对应的输出也是一个bundle，
// ...
module.exports = {
// ...
entry: {
// 数组中的所有文件形成一个chunk，对应的输出也是一个bundle
one: ['./src/index.js', './src/main.js'],
two: './src/main.js'
},
output: {
filename: '[name].js',
output: path.resolve(__dirname, 'build')
}
}
上面的配置输出的情况是这样的：
build
|__ one.js
|__ two.js
# one.js是index.js和main.js两个文件编译的输出产物
# two.js是main.js编译的输出产物
