面试题：Webpack多入口与多出口的基础配置

Question

请描述在Webpack中如何配置多入口和多出口。假设项目中有两个入口文件`src/page1.js`和`src/page2.js`，输出到`dist`目录下不同的HTML文件，对应的打包文件分别为`page1.bundle.js`和`page2.bundle.js`，请给出基本的Webpack配置代码示例。

Answer 1

在Webpack中配置多入口和多出口，可以按照以下步骤进行：

1. 安装Webpack和相关插件： 确保已经安装了webpack、webpack - cli和html - webpack - plugin。如果没有安装，可以使用以下命令安装：

npm install webpack webpack - cli html - webpack - plugin --save - dev

2. 配置Webpack： 在项目根目录下创建或编辑webpack.config.js文件，内容如下：

const path = require('path');
const HtmlWebpackPlugin = require('html - webpack - plugin');

module.exports = {
    // 多入口配置
    entry: {
        page1: path.resolve(__dirname,'src/page1.js'),
        page2: path.resolve(__dirname,'src/page2.js')
    },
    output: {
        // 输出目录
        path: path.resolve(__dirname, 'dist'),
        // 输出文件名
        filename: '[name].bundle.js'
    },
    plugins: [
        // 为page1生成对应的HTML文件
        new HtmlWebpackPlugin({
            template: 'index.html',
            filename: 'page1.html',
            chunks: ['page1']
        }),
        // 为page2生成对应的HTML文件
        new HtmlWebpackPlugin({
            template: 'index.html',
            filename: 'page2.html',
            chunks: ['page2']
        })
    ]
};

上述配置中：

• entry字段指定了多个入口文件。
• output字段指定了输出目录和输出文件名，[name]会根据入口的名称替换为page1或page2。
• 使用HtmlWebpackPlugin插件为每个入口生成对应的HTML文件，并指定了每个HTML文件所依赖的chunk。template指定了HTML模板文件（假设项目根目录下有index.html作为模板），filename指定了生成的HTML文件名。chunks指定了该HTML文件所包含的chunk。