作用
用于指示 webpack 使用哪个模块作为依赖图构建的起点。
进入入口后 webpack 会找出有哪些模块和库是入口直接和间接依赖的。
默认值
./src/index.js
入口与上下文
关系
上下文是入口文件所处的目录的绝对路径的字符串。
cookbook
默认使用 Node.js 进程的当前工作目录,但是推荐在配置中传入一个值。这使得你的配置独立于当前工作目录。
配置说明
context: string
绝对路径,解析入口点(entry point)和 加载器(loader)时会读取该值作为基础路径。
默认为 node 当前工作目录,推荐在配置中传入一个值使得你的配置独立于 node 当前工作目录。
入口 chunk
chunk 是啥
与 入口的关系
每一个入口对应一个 入口 chunk 。
定义
由入口文件直接生成的 chunk,是打包流程的起点、构建流程的开端。
webpack 会从入口 chunk 开始,识别和处理项目中的依赖关系,把所有相关模块整合到一个或多个 chunk 中。
入口 chunk 的生成决定了后续打包任务的走向,它为后续的模块解析、加载、编译和优化等操作提供了基础。
组成
包含入口文件及其依赖模块。
例如:entry: './src/index.js'生成的main.js文件。
入口配置
如何配置
可以配置entry 属性,来指定一个(或多个)不同的入口起点。
当你通过插件生成入口时,你可以传递空对象 {} 给 entry。
语法
单个入口
entry: string | string[]
- 如果传入一个 string,则表示指定模块会被加载并生成一个 入口 chunk
- 如果传入 string 数组,则表示这些模块都会被加载,并且它们会被合并到一个入口 chunk 中。
传入 string 数组可以用于需要同时加载多个模块作为入口的场景。
比如,你有一些初始化代码分布在不同的文件中,但这些代码应该在应用启动时一起加载。
module.exports = {
entry: './path/to/my/entry/file.js',
};
多个入口
{
[key: string]: string |
string[] |
{
import: string | string[],
dependOn: string | string[],// 与另一个入口 chunk 共享模块
filename: string,// 为入口指定一个自定义的输出文件名,默认情况下,入口 chunk 的输出文件名是从 output.filename 中提取出来的。
layer: string, // 为入口点设置层
} |
() => string | string[] | object
}
每一个key表示一个入口的名称,配置单个入口时名称默认为 main 。
每一个入口对应一个独立的入口 chunk 。
值为对象
配置对象属性:
- filename: 为入口指定一个自定义的输出文件名,默认情况下,入口 chunk 的输出文件名是从 output.filename 中提取出来的。
- dependOn:与另一个或多个入口 chunk 共享模块,这样书写 dependOn 的入口 chunk 就不会生产指定的这几个 chunk 中的产物文件了。
- import: 给该属性赋值,相当于 entry 属性传递 string 与 string 数组。
- layer: 为入口点设置层,值为层的名称
值为函数
如果传入一个函数,那么它将会在每次 make 事件【在 webpack 启动和每当 监听的文件变化 时都会触发。】中被调用。
与 output.library 选项结合
当和 output.library 选项结合:如果传入的是一个数组,只有数组的最后一个条目会被导出。