1

I have a folder to which I generate html files, using python. I then compile with the help of webpack some .scss that I have. The thing is that I need webpack to output me several html files for each of the files that python created.

The files that python exports are in a folder called ./export/ and my webpack.config.js looks like this:

'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'
          }
        ]
      }
    ]
  }
}

I manage to manually add each file using: new HtmlWebpackPlugin({ template: './export/2.html', filename:"2.html" }) for example.

But I tried solutions that would make it automatic for me. I've seen for example people use require.context but it doesn't work for me. I also couldn't get the ContextReplacementPlugin to work for me (maybe I just can't hit the right regex, I'd appreciate help with that too). I would love a solution that does this for me.

(I'm new to all this Webpack stuff so please forgive me if I'm showing ignorance.)

Avraham
  • 33
  • 4
  • Check this solution [Multiple html files using webpack](https://stackoverflow.com/a/63385300/13274747) maybe it can help you – Raxel21 Jun 06 '23 at 22:05
  • @Raxel21 I still have to manually add the names of the files to the array in this solution... – Avraham Jun 07 '23 at 08:11
  • What is the problem with `require.context` and `ContextReplacementPlugin` ? They work for most people. – IVO GELOV Jun 09 '23 at 14:10

0 Answers0