如何在Webpack中配置生成两个不同设计的Web应用构建包？

嘿，这个需求其实在Webpack里有两种常用的实现思路，我给你一步步拆解清楚，你可以根据项目的实际情况来选择：

方案一：单配置文件 + 多入口 + 多HtmlWebpackPlugin实例 #

这种方式适合两个Web应用方案差异不大、共享大部分配置的场景，只需要在同一个配置文件里定义多个入口，并为每个入口对应生成一个HTML文件。

具体配置步骤： #

1. 定义多入口
   在webpack.config.js的entry字段里，把不同方案的入口文件写成对象形式：

   const path = require('path');
   
   module.exports = {
     entry: {
       main: './src/main.js', // 对应index.html的入口
       alt: './src/alt.js'    // 对应index_alt.html的入口
     },
     output: {
       filename: '[name].[contenthash].js', // 用[name]占位符区分不同入口的JS文件
       path: path.resolve(__dirname, 'dist'),
       clean: true // 构建前清空dist目录
     },
     // ...其他共享配置（比如module、resolve等）
   }
   

2. 配置多个HtmlWebpackPlugin实例
   借助html-webpack-plugin插件，为每个入口生成对应的HTML文件，确保每个HTML只引入对应入口的JS资源：

   const HtmlWebpackPlugin = require('html-webpack-plugin');
   const path = require('path');
   
   module.exports = {
     // ...上述entry和output配置
     plugins: [
       // 生成index.html，关联main入口
       new HtmlWebpackPlugin({
         template: './src/index.html', // 你的模板文件路径
         filename: 'index.html',
         chunks: ['main'] // 只引入main入口的JS
       }),
       // 生成index_alt.html，关联alt入口
       new HtmlWebpackPlugin({
         template: './src/index_alt.html', // 可选：如果两个HTML模板不同的话
         filename: 'index_alt.html',
         chunks: ['alt'] // 只引入alt入口的JS
       })
     ]
   }
   

   提示：如果两个HTML的模板结构基本一致，也可以共用同一个template文件，只需要修改filename和chunks即可。

方案二：多配置文件（或配置数组） #

如果两个Web应用方案差异较大（比如不同的loader规则、插件、输出路径等），可以用多配置文件或者在一个文件里导出配置数组的方式，完全分开两个构建流程。

方式A：导出配置数组 #

在webpack.config.js里直接导出一个数组，每个元素是独立的构建配置：

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

module.exports = [
  // 第一个配置：对应index.html
  {
    entry: './src/main.js',
    output: {
      filename: 'main.[contenthash].js',
      path: path.resolve(__dirname, 'dist'),
      clean: false // 注意：如果同时构建，不要重复清空目录
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'index.html'
      })
    ],
    // ...main方案的专属配置
  },
  // 第二个配置：对应index_alt.html
  {
    entry: './src/alt.js',
    output: {
      filename: 'alt.[contenthash].js',
      path: path.resolve(__dirname, 'dist'),
      clean: true // 只在最后一次构建时清空
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './src/index_alt.html',
        filename: 'index_alt.html'
      })
    ],
    // ...alt方案的专属配置
  }
];

方式B：拆分独立配置文件 #

把两个方案的配置拆成两个文件：

• webpack.config.main.js：对应main方案的配置
• webpack.config.alt.js：对应alt方案的配置

然后在package.json的scripts里添加两个构建命令：

{
  "scripts": {
    "build:main": "webpack --config webpack.config.main.js",
    "build:alt": "webpack --config webpack.config.alt.js",
    "build": "npm run build:main && npm run build:alt"
  }
}

这样你可以单独构建其中一个方案，或者执行npm run build同时构建两个。

额外注意事项 #

• 如果两个方案有大量共享配置，可以用webpack-merge工具来提取公共配置，避免重复代码。
• 如果你使用了CSS提取插件（比如mini-css-extract-plugin），记得在output里用[name]占位符，让CSS文件也和入口对应上，比如[name].[contenthash].css。
• 构建后的文件会输出到同一个dist目录（你也可以配置不同的output路径），注意文件名不要冲突，用[name]或者不同的前缀来区分。

内容的提问来源于stack exchange，提问作者IsraGab