Как установить дополнительную точку входа и получить возможность создать многостраничный сайт с множеством html css и js файлов?

Question

[kirillon37]

const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCSSExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')

module.exports = {
	entry: path.resolve(__dirname, '../src/script.js'),
	output:
	{
		filename: 'bundle.[contenthash].js',
		path: path.resolve(__dirname, '../dist'),
		publicPath: ''
	},
	devtool: 'source-map',
	plugins:
		[
			new CopyWebpackPlugin({
				patterns: [
					{ from: path.resolve(__dirname, '../static') }
				]
			}),
			new HtmlWebpackPlugin({
				template: path.resolve(__dirname, '../src/index.html'),
				minify: true
			}),
			new MiniCSSExtractPlugin()
		],
	module:
	{
		rules:
			[
				// HTML
				{
					test: /\.(html)$/,
					use: ['html-loader']
				},

				// JS
				{
					test: /\.js$/,
					exclude: /node_modules/,
					use:
						[
							'babel-loader'
						]
				},

				// CSS
				{
					test: /\.css$/,
					use:
						[
							MiniCSSExtractPlugin.loader,
							'css-loader'
						]
				},

				// Images
				{
					test: /\.(jpg|png|gif|svg)$/,
					use:
						[
							{
								loader: 'file-loader',
								options:
								{
									outputPath: 'assets/images/'
								}
							}
						]
				},

				// Fonts
				{
					test: /\.(ttf|eot|woff|woff2)$/,
					use:
						[
							{
								loader: 'file-loader',
								options:
								{
									outputPath: 'assets/fonts/'
								}
							}
						]
				},

				// Shaders
				{
					test: /\.(glsl|vs|fs|vert|frag)$/,
					exclude: /node_modules/,
					use: [
						'raw-loader'
					]
				}
			]
	}
}

const { merge } = require('webpack-merge')
const commonConfiguration = require('./webpack.common.js')
const ip = require('internal-ip')
const portFinderSync = require('portfinder-sync')

const infoColor = (_message) =>
{
    return `\u001b[1m\u001b[34m${_message}\u001b[39m\u001b[22m`
}

module.exports = merge(
    commonConfiguration,
    {
        mode: 'development',
        devServer:
        {
            host: '0.0.0.0',
            port: portFinderSync.getPort(8080),
            contentBase: './dist',
            watchContentBase: true,
            open: true,
            https: false,
            useLocalIp: true,
            disableHostCheck: true,
            overlay: true,
            noInfo: true,
            after: function(app, server, compiler)
            {
                const port = server.options.port
                const https = server.options.https ? 's' : ''
                const localIp = ip.v4.sync()
                const domain1 = `http${https}://${localIp}:${port}`
                const domain2 = `http${https}://localhost:${port}`
                
                console.log(`Project running at:\n  - ${infoColor(domain1)}\n  - ${infoColor(domain2)}`)
            }
        }
    }
)

{
  "scripts": {
    "build": "webpack --config ./bundler/webpack.prod.js",
    "dev": "webpack serve --config ./bundler/webpack.dev.js"
  },
  "dependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "animejs": "^3.2.1",
    "babel-loader": "^8.2.2",
    "cannon": "^0.6.2",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^7.0.0",
    "css-loader": "^5.0.1",
    "dat.gui": "^0.7.7",
    "file-loader": "^6.2.0",
    "hover-effect": "^1.1.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^5.0.0-alpha.7",
    "mini-css-extract-plugin": "^1.3.4",
    "portfinder-sync": "0.0.2",
    "raw-loader": "^4.0.2",
    "style-loader": "^2.0.0",
    "three": "^0.124.0",
    "vanilla-tilt": "^1.7.0",
    "webpack": "^5.14.0",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3"
  }
}

Организация папок: bundler/webpack.common.js webpack.dev.js;
src/index.html style.css script.js;
static/img/