webpack打包多个html页面

可以使用 webpack 来打包多个 HTML 页面。以下是一种常见的配置方法：

1. 首先，安装必要的 webpack 插件：

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

2. 在 webpack.config.js 文件中配置多个页面：

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

module.exports = {
  entry: {
    page1: './src/page1.js',
    page2: './src/page2.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'page1.html',
      template: './src/page1.html',
      chunks: ['page1'],
    }),
    new HtmlWebpackPlugin({
      filename: 'page2.html',
      template: './src/page2.html',
      chunks: ['page2'],
    }),
  ],
};

在上述示例中，我们配置了两个入口文件（page1.js 和 page2.js），分别对应两个 HTML 页面（page1.html 和 page2.html）。每个 HtmlWebpackPlugin 实例都指定了生成的 HTML 文件名称、模板文件路径以及关联的入口文件。

3. 创建对应的 HTML 模板文件：

在 src 目录下创建 page1.html 和 page2.html 文件，可以在这里编写对应页面的 HTML 结构。

4. 运行打包命令：

npx webpack

运行以上命令后，webpack 将会根据配置生成多个 HTML 文件，并将对应的 JavaScript 文件注入到相应的 HTML 页面中。最终打包好的文件将存储在 dist 目录下。

这样，你就可以通过配置多个 HtmlWebpackPlugin 实例来打包多个 HTML 页面。每个 HTML 页面可以关联不同的入口文件，实现灵活的页面打包配置。