javascript - webpack split js 文件，再得到一个文件

Question

当我使用 webpack 4 拆分 js 文件时，我得到 dist 目录包含:app.js、vendor.js 和另一个 js 文件名 vendor~app.js，它是如何以及为什么出现的？

这是这些文件:

这是我的 webpack 配置:

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

从入口点移除 vendor 。即使在语义上也是错误的。

这些文件名旨在防止代码重复。如果您有真正的第二个入口点:anotheApp.js，您将有两个选择将什么加载到页面:

1. vendor ~anotheApp~app.bundle.js + app.bundle.js
2. vendor ~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('@', '_')}`;
         },
       },
     },