webpack 入口和上下文(Entry and Context)

在使用 webpack 构建项目时，入口和上下文是非常重要的概念。入口指定 webpack 应该从哪个文件开始构建依赖关系图，而上下文则指定 webpack 在寻找模块时的根目录。

入口

在 webpack 配置文件中，我们可以通过指定 entry 属性来设置入口文件。入口可以是一个单一的文件路径，也可以是一个对象，用于指定多个入口文件。当指定多个入口文件时，webpack 会将它们打包到一个或多个 bundle 中，取决于你的配置。

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

在上面的例子中，我们指定了两个入口文件：index.js 和 vendor.js。webpack 将会以这两个文件为起点，构建出两个 bundle。

上下文

在 webpack 配置文件中，我们可以通过指定 context 属性来设置上下文。上下文指定了 webpack 在寻找模块时的根目录。默认上下文是配置文件所在的目录，但是你可以根据需要进行修改。

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: './index.js'
};

在上面的例子中，我们将上下文设置为 src 目录，这意味着 webpack 将会在 src 目录下寻找入口文件和模块。这样可以让我们的配置文件更加简洁，并且使得路径更加易于管理。

以上就是关于 webpack 入口和上下文的介绍，希望能帮助你更好地理解 webpack 的工作原理和配置方式。接下来我们将继续探讨 webpack 的其他重要概念。