Webpack 中如何配置入口文件 (Entry)？

推荐答案

在 Webpack 中，配置入口文件（Entry）可以通过 entry 属性来实现。entry 属性可以是一个字符串、数组或对象，具体取决于项目的需求。

单入口配置

如果项目只有一个入口文件，可以直接指定一个字符串路径：

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

多入口配置

如果项目有多个入口文件，可以使用对象形式来指定多个入口：

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

动态入口配置

在某些情况下，可能需要动态生成入口文件路径，可以通过函数来实现：

module.exports = {
  entry: () => './src/' + process.env.ENTRY_FILE + '.js'
};

本题详细解读

1. 单入口配置

单入口配置是最简单的形式，适用于只有一个入口文件的项目。Webpack 会从这个入口文件开始构建依赖图。

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

2. 多入口配置

多入口配置适用于有多个独立模块的项目。每个入口文件会生成一个独立的 bundle 文件。

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

3. 动态入口配置

动态入口配置适用于需要根据环境变量或其他条件动态生成入口文件路径的场景。通过函数返回入口文件路径，可以实现更灵活的配置。

module.exports = {
  entry: () => './src/' + process.env.ENTRY_FILE + '.js'
};

4. 入口文件的作用

入口文件是 Webpack 构建的起点，Webpack 会从入口文件开始递归解析依赖，生成依赖图，并最终打包成输出文件。

5. 注意事项

• 入口文件的路径是相对于 Webpack 配置文件的路径。
• 如果使用多入口配置，输出文件的名称可以通过 output.filename 配置项来指定。
• 动态入口配置需要确保返回的路径是有效的，否则会导致构建失败。