入口entry

58 阅读3分钟

作用

用于指示 webpack 使用哪个模块作为依赖图构建的起点。

进入入口后 webpack 会找出有哪些模块和库是入口直接和间接依赖的。

默认值

./src/index.js

入口与上下文

关系

上下文是入口文件所处的目录的绝对路径的字符串。

cookbook

默认使用 Node.js 进程的当前工作目录,但是推荐在配置中传入一个值。这使得你的配置独立于当前工作目录。

配置说明

context: string

绝对路径,解析入口点(entry point)和 加载器(loader)时会读取该值作为基础路径。

默认为 node 当前工作目录,推荐在配置中传入一个值使得你的配置独立于 node 当前工作目录。

入口 chunk

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 选项结合:如果传入的是一个数组,只有数组的最后一个条目会被导出。