распакуйте js файлы, получите еще один файл

Question

когда я использую webpack 4 для разделения js-файлов, я получаю каталог dist, содержащий: app.js, vendor.js и еще один js-файл vendor ~ app.js, как и почему это происходит?

Вот эти файлы:

и это мой конфиг веб-пакета:

const path = require('path');

const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {

    mode: 'production',

    entry: {
        vendor: ['react', 'react-dom', 'redux', 'react-redux', 'react-router-dom'],
        app: './src/entry.js'
    },

    output: {
        path: path.resolve(__dirname, 'dist'),
        chunkFilename: '[name].js',
        publicPath: '/',
        filename: '[name].js'
    },

    module: {
        rules: [
            {
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                include: path.resolve(__dirname, 'src'),
                use: [{
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true,
                        babelrc: false,
                        presets: [['@babel/preset-env', {
                            "modules": false
                        }], '@babel/preset-react'],
                        plugins: ['@babel/plugin-transform-runtime', "@babel/plugin-proposal-class-properties"]
                    }
                }]
            },
        ]
    },

    optimization: {
        runtimeChunk: {
            name: 'manifest'
        },
        splitChunks: {
            minChunks: 1,
            minSize: 2,
            chunks: 'all',
            name: true,
            cacheGroups: {
                common: {
                    test: 'vendor',
                    chunks: 'initial',
                    name: 'vendor',
                    enforce: true,
                }
            }
        }
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
    ]
}

в моемentry.js:

import React, { Component } from 'react'

import ReactDOM from 'react-dom'

class App extends Component {

    constructor (props) {
        super(props);
    }

    render () {
        return (
            <div>Hello World</div>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById('app'))

Answer 1

Удалить продавца из точки входа.Это неправильно даже семантически.

Эти имена файлов предназначены для предотвращения дублирования кода.Если бы у вас была настоящая вторая точка входа: anotheApp.js, у вас было бы два варианта загрузки на страницу:

1. vendors ~ anotheApp ~ app.bundle.js + app.bundle.js
2. vendors ~ anotheApp ~ app.bundle.js + anotherApp.bundle.js.

Чтобы поместить каждый пакет в отдельную ячейку:

optimization: {    runtimeChunk: 'single',    splitChunks: {
     chunks: 'all',
     maxInitialRequests: infinity,
     cacheGroups: {
       vendor: {
         test: /[\\/]node_modules[\\/]/,
         vendorname(v) {
           var name = v.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
           return `npm.${name.replace('@', '_')}`;
         },
       },
     },