在Webpack中构建多页应用可以通过以下步骤进行配置:

  1. 在项目文件夹中创建多个页面的入口文件。每个页面一个入口文件,例如 page1.jspage2.js 等。每个入口文件都需明确定义其对应的 HTML 模板文件。

  2. 在Webpack配置文件中,通过 entry 属性指定每个入口文件。

entry: {
  page1: './src/page1.js',
  page2: './src/page2.js'
}
  1. 使用 HtmlWebpackPlugin 插件来自动生成 HTML 文件。在Webpack配置文件中进行如下配置:
const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'page1.html',
      template: './src/page1.html',
      chunks: ['page1']
    }),
    new HtmlWebpackPlugin({
      filename: 'page2.html',
      template: './src/page2.html',
      chunks: ['page2']
    }),
    // ...
  ]
};

在上述配置中,我们使用 HtmlWebpackPlugin 生成了 page1.html 和 page2.html 文件。通过 filename 属性指定生成的文件名,通过 template 属性指定模板文件的路径。通过 chunks 属性指定使用哪些入口文件对应的代码块。

  1. 可选地,配置 output 属性来指定输出的文件名和路径。在Webpack配置文件中进行如下配置:
output: {
  filename: '[name].bundle.js',
  path: path.resolve(__dirname, 'dist')
}

上述配置中,我们使用 [name] 占位符来根据入口文件的名称为每个输出的 JavaScript 文件命名。

这样配置完成后,Webpack会根据每个入口文件生成对应的 HTML 文件和 JavaScript 文件,以及可能的 CSS 文件等其他资源文件。