Почему в webpack при подключении двух html-страниц, ко второй не подключается js и css?

Question

[Olha-M]

В index.html подключен скрипт со стилями, а в calc.html нет. При подключении вручную тоже не видны стили. До этого работала с gulp, это мой первый проект на webpack, поэтому не могу найти проблему
Моя сборка

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CopyPlugin = require("copy-webpack-plugin")

module.exports = {
  	target: 'web',
	// context: path.resolve(__dirname, 'src'),
	entry: {
		main: [
			'core-js/stable',
			'regenerator-runtime/runtime',
			'./src/index.js'
		],
	},
	output: {
		filename: '[name].bundle.js',
		path: path.resolve(__dirname, 'dist'),
		publicPath: '',
		clean: true
	},
	resolve: {
		extensions: ['.js'],
		alias: {
			images: path.resolve(__dirname, 'src/accets/images/'),
		},
	},
	devtool: 'source-map',
	devServer: {
		port: 3000,
		open: true,
		contentBase: path.join(__dirname, 'src'),
		watchContentBase: true
	  },
	plugins: [
		new HtmlWebpackPlugin({
			filename: 'index.html',
			template: path.resolve(__dirname, 'src/index.html'),
		}),
		new HtmlWebpackPlugin({
			filename: 'calc.html',
			template: path.resolve(__dirname, 'src/pages/calc.html'),
		}),
		new MiniCssExtractPlugin({
			filename: '[name].bundle.css',
		}),
		new CopyPlugin({
			patterns: [
				{ 
					from: path.resolve(__dirname, 'src/accets/images'), 
					to: path.resolve(__dirname, 'dist')
				},
			],
		  })
	],
	module: {
		rules: [
			{
				test: /\.s[ac]ss$/i,
				use: [
					MiniCssExtractPlugin.loader,
					"css-loader",
					"sass-loader",
				],
			},
			{
				test: /\.m?js$/,
				exclude: /node_modules/,
				use: {
				  loader: "babel-loader",
				  options: {
					  presets: ['@babel/preset-env']
				  }
				}
			},
			{
				test: /\.html$/,
				use: [
				  {
					loader: "html-loader"
				  }
				]
			},
    	],
	}
}