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

Question

假设你有一个项目，需要打包多个页面的JavaScript代码，每个页面有独立的入口文件。请描述在Webpack中如何配置实现多入口打包，并说明entry、output等相关配置项该如何设置。

Answer 1

1. 多入口打包配置步骤

1. 创建项目结构：假设项目结构如下，每个页面有自己的入口文件。

   project/
   ├── src/
   │   ├── page1/
   │   │   └── index.js
   │   ├── page2/
   │   │   └── index.js
   │   └──...
   ├── webpack.config.js
   └── package.json
   

2. 配置Webpack：在webpack.config.js中进行如下配置。

2. entry配置

entry配置项用于指定入口文件。对于多入口，它可以是一个对象，对象的键是入口的名称，值是入口文件的路径。

module.exports = {
    entry: {
        page1: './src/page1/index.js',
        page2: './src/page2/index.js'
    },
    //...其他配置
};

3. output配置

output配置项用于指定输出文件的相关信息。

• filename：如果是多入口，需要使用[name]占位符，[name]会被替换为入口的名称。
• path：指定输出目录，必须是绝对路径。

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

4. 完整示例

const path = require('path');

module.exports = {
    entry: {
        page1: './src/page1/index.js',
        page2: './src/page2/index.js'
    },
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            // 配置文件加载规则，例如babel-loader处理ES6+代码
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset - env']
                    }
                }
            }
        ]
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
    resolve: {
        extensions: ['.js']
    }
};

通过上述配置，Webpack会将每个入口文件打包成独立的JavaScript文件输出到指定的dist目录中。同时，optimization.splitChunks配置可以将多个入口文件中重复的代码提取出来，resolve.extensions配置了在引入模块时可以省略的文件扩展名。