# 介绍
入口对象entry是用于 webpack 查找开始构建 bundle 的地方。上下文是入口文件所处的目录的绝对路径的字符串。
# entry
entry分为单文件入口和多文件入口。
# 单文件入口
配置方式:
- 1、字符串形式
const path = require('path')
module.exports = {
context: path.resolve(__dirname, './'),
entry: './src/index.js'
}
1
2
3
4
5
2
3
4
5
- 2、对象形式
const path = require('path')
module.exports = {
context: path.resolve(__dirname, './'),
entry: {
main: './src/index.js'
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
上面两种写法均可以实现将src/index.js作为入口文件，生成名为main.js的打包文件。如果想要自定义输出文件的名称则可以这样写
module.exports = {
entry: {
app: './src/index.js'
}
}
1
2
3
4
5
2
3
4
5
这样，打包生成的文件就会称为app.js，与文件对象的key值相同。
提示
如果输入文件为数组形式会如何呢，就像下面这样：
module.exports = {
entry: {
app: ['./src/index.js', './src/main.js']
}
}
1
2
3
4
5
2
3
4
5
根据webpack官方说法，输入为数组形式，则数组的所有子元素都会作为构建的入口，但是他们最终会打包出一个文件为app.js，而不是
想多文件入口那样打包出多个文件。
一些单页应用项目会采用在入口处添加@babel/polyfill，作为入口文件，这样来做浏览器的兼容性处理。
# 多文件入口
使用多文件入口会生成多个打包文件，如下所示
module.exports = {
entry: {
app: './src/index.js',
main: './src/main.js'
}
}
1
2
3
4
5
6
2
3
4
5
6
使用此配置最后会生成app.js和main.js文件。
# 总结
entry决定了我们的应用程序从哪里开始构建我们的应用程序，并且可以根据项目需求配置单入口还是多入口。
现在我们的项目此次只需要有一个入口，则最终我们的webpack配置如下：
const path = require('path')
module.exports = {
context: path.resolve(__dirname, './'),
entry: {
app: './src/index.js',
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8