I am trying to use two separate css files for two seperate HTMl page files using Webpack.

This is my webpack config file:

const path = require('path');

module.exports = {
  mode: 'development',

  entry: './src/js/webpackDist.js',

  module: {
    rules: [
      {
        test: /.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },

  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  }
  
  
};

module.exports = {
  mode: 'development',

  entry: './src/js/webpackDistpage2.js',

  module: {
    rules: [
      {
        test: /.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },

  output: {
    filename: 'main2.js',
    path: path.resolve(__dirname, 'dist'),
  }
  

So each HTML file has its own JS module it calls in the “body” HTML element, and the entry files in my webpack.config.js file only import the correct css file. So I’m wondering why the result is that across both the HTML pages it’s combining both CSS files?

I’ve tried changing the webpack.config.js file above, but it’s not working like i’d expect it to. I’m not so familiar with webpack and javascript in general. Any help will be appreciated, thanks!