如何让Webpack自动导出同一文件夹下的所有.html文件？

我通过Python在指定文件夹生成.html文件，随后使用Webpack编译.scss文件。现需Webpack针对Python生成的每个.html文件输出对应文件。

Python导出的文件存放在./export/文件夹中，当前webpack.config.js配置如下：

'use strict'

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

const ContextReplacementPlugin = require("webpack/lib/ContextReplacementPlugin");

module.exports = {
  mode: 'development',
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './export/1.html' }),
    new HtmlWebpackPlugin({ template: './export/2.html', filename:"2.html" })
  ],
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            // Adds CSS to the DOM by injecting a `<style>` tag
            loader: 'style-loader'
          },
          {
            // Interprets `@import` and `url()` like `import/require()` and will resolve them
            loader: 'css-loader'
          },
          {
            // Loader for webpack to process CSS with PostCSS
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: () => [
                  autoprefixer
                ]
              }
            }
          },
          {
            // Loads a SASS/SCSS file and compiles it to CSS
            loader: 'sass-loader'
          }
        ]
      }
    ]
  }
}

目前可以手动添加HtmlWebpackPlugin配置处理单个文件，但希望实现自动批量处理。尝试过require.context和ContextReplacementPlugin但未成功（可能正则配置有误），寻求可行的自动处理方案。

（注：刚接触Webpack，若有认知不足请见谅。）

可以通过Node.js的文件系统模块fs遍历./export/文件夹下的所有.html文件，自动生成对应的HtmlWebpackPlugin实例数组，替换原来手动编写的plugins配置。

基础版（仅处理根目录下的html文件） #

修改后的webpack.config.js代码如下：

'use strict'

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

// 自动生成HtmlWebpackPlugin实例数组
const getHtmlPlugins = () => {
  const exportDir = path.resolve(__dirname, './export')
  // 读取文件夹内所有文件
  const files = fs.readdirSync(exportDir)
  // 筛选出.html后缀的文件
  const htmlFiles = files.filter(file => path.extname(file) === '.html')
  
  // 为每个html文件创建插件实例
  return htmlFiles.map(file => {
    return new HtmlWebpackPlugin({
      template: path.resolve(exportDir, file),
      filename: file // 输出文件名与原文件一致
    })
  })
}

module.exports = {
  mode: 'development',
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true
  },
  // 替换为自动生成的插件数组
  plugins: getHtmlPlugins(),
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: () => [autoprefixer]
              }
            }
          },
          { loader: 'sass-loader' }
        ]
      }
    ]
  }
}

进阶版（支持子文件夹内的html文件） #

如果Python生成的html文件存在嵌套子文件夹，可以使用glob库简化文件匹配：

1. 先安装依赖：

npm install glob --save-dev

2. 修改getHtmlPlugins函数：

const glob = require('glob')

const getHtmlPlugins = () => {
  // 匹配export文件夹下所有html文件（包括子文件夹）
  const htmlFiles = glob.sync('./export/**/*.html')
  
  return htmlFiles.map(file => {
    // 保持输出路径与原文件结构一致
    const filename = path.relative('./export', file)
    return new HtmlWebpackPlugin({
      template: file,
      filename: filename
    })
  })
}

核心逻辑说明 #

• 利用Node.js的文件操作能力，自动识别目标文件夹内的所有html文件
• 为每个文件生成独立的HtmlWebpackPlugin实例，确保每个html文件都能被Webpack处理并输出到dist目录
• 进阶版通过glob的通配符匹配，实现了对子文件夹的递归处理，保持输出结构与原文件一致

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