Why does webpack include both scripts?

Question

webpack

Hello, I am learning to build multi-page projects on webpack, I have such a problem.

When building webpack, it connects 2 js files, although in theory it should connect one, this is how the config is configured

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

let config = {
    // точка входа
    entry:{index: './src/pages/index/main.js', login: './src/pages/login/main.js'},
    // Точка выхода (и другие настройки еще не совсем разобрался)
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "js/[name].js",
        publicPath: ""
    },

    // config web-dev-server
    devServer: {
        overlay: true
    },
    // Подключенные доп модули webpack
    module: {
        rules: [
            //babel перегоняет новый код в старый для поддержки старыми браузерами
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: '/node_modules/'
            },
            //Данный модуль позволяет импортировать css в js
            // Последовательность подключения loader справа на лево
            {
                test: /\.(sa|sc|c)ss$/,
                use:
                    [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: process.env.NODE_ENV === 'development',
                            fallback: "style-loader",
                        },
                    },
                    'css-loader',
                    'sass-loader',
                ],
            },
            {
                test: /\.pug$/,
                loader: 'pug-loader'
            },
            {
                test: /\.(img|jpe?g|gif)$/i,
                loader: 'file-loader',
                options: {
                    name: 'img/[path][name].[ext]',
                },
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'file-loader',
                options: {
                    name: 'fonts/[name].[ext]'
                }
            }
        ]
    },
    //Алиасы
    resolve: {
        alias: {
            '~' : '../../',
        }
    },


    // Подключаемые плагины
    plugins: [

        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // all options are optional
            filename: '[name].css',
            chunkFilename: '[id].css',
            ignoreOrder: false, // Enable to remove warnings about conflicting order
        }),

        new HtmlWebpackPlugin({
            template: "./src/pages/index/index.pug",
            filename: "index.html",
            files: {
                js: './src/pages/index/main.js',
                chunks: {
                    entry: './src/pages/index/main.js',
                    js: './src/pages/index/main.js'
                },

            }
        }),
        new HtmlWebpackPlugin({
            template: "./src/pages/login/login.pug",
            filename: "login.html",
            files: {
                js: './src/pages/login/main.js',
                chunks: {
                    entry: './src/pages/login/main.js',
                    js: './src/pages/login/main.js'
                }

            }
        }),

    ]

};

module.exports = config;

Here is the file system.

Maybe I didn’t specify something correctly, if you need json

{
  "name": "enb",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --mode development --inline"
  },
  "author": "Kotaro Hiba",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.4.1"
  },
  "devDependencies": {
    "@babel/core": "^7.7.4",
    "@babel/preset-env": "^7.7.4",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "path": "^0.12.7",
    "postcss-loader": "^3.0.0",
    "pug": "^2.0.4",
    "pug-loader": "^2.4.0",
    "sass": "^1.23.7",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.1",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}

Don't swear too much, I'm working with bundlers for the first time, I still don't fully understand how they work

Answer 1

not sure maybe because of this
output: {
path: path.resolve(__dirname, 'dist'),
filename: "js/[name].js",
publicPath: ""
},
try instead of [name] write bundle.js or what is your output js