webpack 入口起点(entry points)

初始化项目配置中的 entry 字段指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph) 的开始。

单个入口

语法：entry: string | [string]

示例：

webpack.config.js：

module.exports = {
  entry: {
    main: './path/my/entry/file.js',
  },
};

简写：

module.exports = {
  entry: './path/my/entry/file.js'
};

也可以将一个文件路径数组传递给 entry 属性，这将创建一个所谓的 “multi-main entry”。

想要一次注入多个依赖文件，并且将它们的依赖关系绘制在一个 “chunk” 中时，这种方式就很有用。

webpack.config.js：

module.exports = {
  entry: ['./src/file_1.js', './src/file_2.js'],
  output: {
    filename: 'bundle.js',
  }
};

当想通过一个入口（例如一个库）为应用程序或工具快速设置 webpack 配置时，单一入口的语法方式是不错的选择。

不过，使用这种语法方式来扩展或调整配置的灵活性不大。

对象语法

用法：entry: { <entryChunkName> string | [string] } | {}

webpack.config.js：

module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js'
  }
};

对象语法会比较繁琐。

不过，这是应用程序中定义入口的最可扩展的方式。

“webpack 配置的可扩展” 是指，这些配置可以重复使用，并且可以与其他配置组合使用。

这是一种流行的技术，用于将关注点从环境(environment)、构建目标(build target)、运行时(runtime)中分离。然后使用专门的工具（如 webpack-merge）将它们合并起来。

当你通过插件生成入口时，可以传递空对象 {} 给 entry。

描述入口的对象

用于描述入口的对象。可以使用如下属性：

dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。
filename: 指定要输出的文件名称。
import: 启动时需加载的模块。
library: 指定 library 选项，为当前 entry 构建一个 library。
runtime: 运行时 chunk 的名字。如果设置了，就会创建一个新的运行时 chunk。在 webpack 5.43.0 之后可将其设为 false 以避免一个新的运行时 chunk。
publicPath: 当该入口的输出文件在浏览器中被引用时，为它们指定一个公共 URL 地址。

示例：

webpack.config.js：

module.exports = {
  entry: {
    a2: 'dependingfile.js',
    b2: {
      dependOn: 'a2',
      import: './src/app.js',
    }
  }
};

runtime 和 dependOn 不应在同一个入口上同时使用，所以如下配置无效，并且会抛出错误：

webpack.config.js

module.exports = {
  entry: {
    a2: './a',
    b2: {
      runtime: 'x2',
      dependOn: 'a2',
      import: './b'
    }
  }
};

确保 runtime 不能指向已存在的入口名称，例如下面配置会抛出一个错误：

module.exports = {
  entry: {
    a1: './a',
    b1: {
      runtime: 'a1',
      import: './b',
    }
  }
};

另外 dependOn 不能是循环引用的，下面的例子也会出现错误：

module.exports = {
  entry: {
    a3: {
      import: './a',
      dependOn: 'b3',
    },
    b3: {
      import: './b',
      dependOn: 'a3',
    }
  }
};

使用场景

分离 app(应用程序) 和 vendor(第三方库) 入口

webpack.config.js：

module.exports = {
  entry: {
    main: './src/app.js',
    vendor: './src/vendor.js',
  }
};

这是告诉 webpack 要配置 2 个单独的入口点。

webpack.prod.js：

module.exports = {
  output: {
    filename: '[name].[contenthash].bundle.js',
  }
};

webpack.dev.js：

module.exports = {
  output: {
    filename: '[name].bundle.js',
  },
};

这样就可以在 vendor.js 中存入未做修改的必要 library 或文件（例如 Bootstrap, jQuery, 图片等），然后将它们打包在一起成为单独的 chunk。

内容保持不变，这使浏览器可以独立地缓存它们，从而减少了加载时间。

在 webpack < 4 的版本中，通常将 vendor 作为一个单独的入口起点添加到 entry 选项中，以将其编译为一个单独的文件（与 CommonsChunkPlugin 结合使用）。

在 webpack 4 中不鼓励这样做。而是使用 optimization.splitChunks选项，将 vendor 和 app(应用程序) 模块分开，并为其创建一个单独的文件。

不要为 vendor 或其他不是执行起点创建 entry。

多页面应用程序

webpack.config.js：

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js',
  }
};