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

Question

在Webpack中，假设项目有两个入口文件 `src/page1.js` 和 `src/page2.js`，请描述如何进行多入口配置，并输出对应的HTML文件，每个HTML文件引用各自入口生成的JavaScript文件。请给出Webpack配置文件的关键代码片段。

Answer 1

在Webpack中配置多入口并生成对应的HTML文件，可以按以下步骤进行：

1. 配置入口(entry)：在Webpack配置文件中，将入口定义为一个对象，每个属性对应一个入口文件。
2. 使用html-webpack-plugin生成HTML文件：该插件可以为每个入口生成对应的HTML文件，并自动引入相应的JavaScript文件。

以下是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].[chunkhash].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname,'src/page1.html'),
      filename: 'page1.html',
      chunks: ['page1']
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname,'src/page2.html'),
      filename: 'page2.html',
      chunks: ['page2']
    })
  ]
};

上述代码中：

• entry：定义了两个入口page1和page2，分别对应src/page1.js和src/page2.js。
• output：指定输出路径为dist目录，并且生成的文件名包含入口名和哈希值。
• plugins：使用HtmlWebpackPlugin为每个入口生成对应的HTML文件。template指定HTML模板文件，filename指定生成的HTML文件名，chunks指定该HTML文件要引入的JavaScript文件。确保在src目录下有page1.html和page2.html模板文件。