如何用Webpack将多页面的HTML/JS/CSS打包到指定多目录？

第一步：安装所需依赖 #

先执行命令安装必要的Webpack插件：

npm install --save-dev html-webpack-plugin mini-css-extract-plugin css-minimizer-webpack-plugin terser-webpack-plugin

第二步：完整Webpack配置文件 #

替换你的webpack.config.js为以下内容，适配你的项目结构：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // 多页面入口配置，对应每个页面的JS入口文件
  entry: {
    main: path.resolve(__dirname, 'frontEnd/public/pages/main/scripts/index.js'),
    settings: path.resolve(__dirname, 'frontEnd/public/pages/settings/scripts/index.js'),
    admin: path.resolve(__dirname, 'frontEnd/public/pages/admin/scripts/index.js'),
  },
  // 输出配置：指定打包到data目录的对应位置
  output: {
    filename: '[name]/[name].[contenthash].js', // 每个页面的JS打包到对应子文件夹，带哈希做缓存优化
    path: path.resolve(__dirname, 'data/public/pages'), // 最终输出根目录
    clean: true, // 打包前自动清空目标目录，避免旧文件残留
  },
  mode: 'production', // 生产模式，默认启用基础优化
  module: {
    rules: [
      // 处理CSS文件：提取为单独文件而非嵌入JS
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析CSS中的import、url等语法
        ],
      },
      // 若使用SCSS/SASS，可添加以下规则（可选）
      // {
      //   test: /\.s[ac]ss$/i,
      //   use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      // },
    ],
  },
  plugins: [
    // 为main页面生成HTML
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'frontEnd/public/pages/main/html/index.html'), // 源HTML模板路径
      filename: 'main/index.html', // 输出到data目录的路径和文件名
      chunks: ['main'], // 仅引入当前页面的JS和CSS，避免冗余
      minify: {
        collapseWhitespace: true,
        removeComments: true,
        minifyCSS: true, // 压缩HTML内联CSS
        minifyJS: true, // 压缩HTML内联JS
      },
    }),
    // 为settings页面生成HTML
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'frontEnd/public/pages/settings/html/index.html'),
      filename: 'settings/index.html',
      chunks: ['settings'],
      minify: {
        collapseWhitespace: true,
        removeComments: true,
        minifyCSS: true,
        minifyJS: true,
      },
    }),
    // 为admin页面生成HTML
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'frontEnd/public/pages/admin/html/index.html'),
      filename: 'admin/index.html',
      chunks: ['admin'],
      minify: {
        collapseWhitespace: true,
        removeComments: true,
        minifyCSS: true,
        minifyJS: true,
      },
    }),
    // 提取CSS到对应页面的子文件夹
    new MiniCssExtractPlugin({
      filename: '[name]/[name].[contenthash].css', // CSS文件输出路径，带哈希缓存
    }),
  ],
  optimization: {
    minimizer: [
      // 压缩JS，可按需添加规则（比如移除console）
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // 可选：打包时移除console.log
          },
        },
      }),
      new CssMinimizerPlugin(), // 压缩CSS文件
    ],
    // 可选：提取多页面共用的公共代码到单独文件，优化加载速度
    splitChunks: {
      chunks: 'all',
      name: 'common',
    },
  },
};

关键配置说明 #

1. 入口与输出：

   • entry 配置每个页面的JS入口，要确保在入口JS中引入对应页面的CSS（比如在main/scripts/index.js中添加import '../styles/index.css'），Webpack才会识别并打包CSS。
   • output 指定最终输出到data/public/pages，contenthash用于缓存优化，只有文件内容变化时哈希值才会更新。

2. CSS处理：

   • 使用MiniCssExtractPlugin将CSS从JS中提取为单独文件，替代会把CSS注入JS的style-loader。
   • 配合CssMinimizerPlugin完成CSS压缩。

3. HTML生成：

   • 每个页面单独实例化HtmlWebpackPlugin，chunks属性确保只引入当前页面的资源，避免跨页面资源冗余。
   • minify配置直接完成HTML文件压缩，同时处理内部的CSS和JS代码。

4. 清理旧文件：

   • output.clean: true会在每次打包前清空目标目录，避免旧打包文件残留。

内容的提问来源于stack exchange，提问作者Dr.Random