面试题：Webpack配置文件中如何配置多入口打包？

Question

假设项目中有两个独立的页面需要分别打包，在webpack.config.js文件中应如何配置entry和output以实现多入口打包，并确保输出的文件路径和命名符合规范？

Answer 1

在 webpack.config.js 中，可以如下配置实现多入口打包：

const path = require('path');

module.exports = {
    entry: {
        page1: './src/page1.js',
        page2: './src/page2.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[chunkhash].js',
        chunkFilename: '[name].[chunkhash].chunk.js'
    },
    // 其他配置项...
};

在上述配置中：

1. entry：通过对象形式定义了两个入口文件 page1 和 page2，对应各自的源文件路径。
2. output：
   • path 指定输出目录为项目根目录下的 dist 文件夹。
   • filename 使用 [name] 占位符，它会被替换为入口的名称（即 page1 或 page2），[chunkhash] 则是根据文件内容生成的哈希值，用于缓存控制。这样输出的文件名会是 page1.[chunkhash].js 和 page2.[chunkhash].js。
   • chunkFilename 用于非入口chunk（如异步加载的模块）的命名，同样使用 [name] 和 [chunkhash] 占位符。