Why does WEBPACK generate a JS file for every CSS?

Question

webpack

why WEBPACK, when processing scss, creates another JS file for each CSS, I bring the
config

module.exports = {
    entry: {
        bundle: './src/js/bundle.js',
        index: './src/js/index.js',
        common_css: path.resolve(__dirname, './src/scss/main.scss'),
        index_css: path.resolve(__dirname, './src/scss/index.scss')
    },
    output: {
        path: path.resolve(__dirname, './local/templates/'), 
        filename: './js/[name].js'
    },
    devtool: "source-map",
    optimization: {
        minimizer: [
            new OptimizeCSSAssetsPlugin({}),
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: false,
                uglifyOptions: {
                    output: {
                        comments: false,
                    }
                }
            }),
        ]
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'src/js'),
                exclude: [/node_modules/],
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env','stage-3']
                        }
                    }
            },
            {
                test: /\.scss$/,
                include: path.resolve(__dirname, 'src/scss'),
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true,
                            minimize: true,
                            url: false
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                autoprefixer({
                                    browsers:['ie >= 8', 'last 4 version']
                                })
                            ],
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true
                        }
                    }
                ]

            },
            {
                test: /\.html$/,
                include: path.resolve(__dirname, 'src/html/includes/'),
                use: ['raw-loader']
            },
            {
                test: /\.(gif|png|jpe?g|svg)$/i,
                use : [
                    { loader: "file-loader?name=i/[hash].[ext]"},
                ]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file?name=public/fonts/[name].[ext]'
            }
        ]
    },
    resolve: {
        modules: ["node_modules", "spritesmith-generated"]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: './css/[name].css',
            allChunks: true,
        }),
 
        
        ]),
    ].concat(phpPlugins)

};

when run build it generates
Entrypoint bundle [big] = ./js/bundle.js
Entrypoint index = ./js/index.js
Entrypoint common_css = ./css/common_css.css ./js/common_css.js
Entrypoint index_css = ./ css/index_css.css ./js/index_css.js
I don’t understand why ./js/common_css.js and ./js/index_css.js are needed
i.e. it is for each entry point if it processes scss generates .js for it
please explain why he does this
, can it be turned off

Answer 1

sass and is are imported into entry.js, and in the webpack config you specify entry.js

import '../sass/main.scss';
import '../js/main.js';

entry: {
    'main': './assets/entry.js',
  },