为什么webpack 4会生成名为0.js，1.js 2.js的文件？

Question

在尝试从webpack 3切换到4时，我使用了简化的配置，如以下摘录所示。构建成功，但是生成了一些文件名只有一个数字的块，我似乎无法理解为什么？

0.css   12.5 KiB                             0  [emitted]
 0.js    312 KiB                             0  [emitted]
 1.js   90.3 KiB                             1  [emitted]
 2.js    109 KiB                             2  [emitted]
 3.js    647 KiB                             3  [emitted]
 4.js   1.14 MiB                             4  [emitted]
5.css   33.5 KiB                             5  [emitted]
 5.js   1.56 MiB                             5  [emitted]
6.css  602 bytes                             6  [emitted]
 6.js   92.8 KiB                             6  [emitted]

组态：

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

module.exports = function (env, options) {
    const PRODUCTION = options.mode === 'production';

    return {
        entry: {
            common: ['libA', 'libB', './common/A.js', './common/A.js', /* ... */],
            pageA: ['./src/pageA/file1.js', './src/pageA/file2.js', /* ... */],
            pageB: ['./src/pageB/file1.js', './src/pageB/file2.js', /* ... */],
            /* ... */
        },
        output: {
            path: path.resolve('./dist'),
            filename: `[name]${PRODUCTION ? '.min' : ''}.js`,
            chunkFilename: `[name]${PRODUCTION ? '.min' : ''}.js`,
            libraryTarget: 'var'
        },
        module: {
            rules: [
                {
                    test: /\.js$/i,
                    include: /src/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader'
                    }
                },
                {
                    test: /\.css$/i,
                    include: /src/,
                    exclude: /node_modules/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: false,
                                importLoaders: 1
                            }
                        }
                    ]
                },
                /* ... */
            ]
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: `[name].${PRODUCTION ? 'min.css' : 'css'}`,
                chunkFilename: `[name].${PRODUCTION ? 'min.css' : 'css'}`
            })
        ],
        optimization: {
            splitChunks: {
                chunks: 'initial',
                name: false,
                cacheGroups: {
                    common: {
                        test: true,
                        name: 'common',
                        chunks: 'initial',
                        minSize: 0,
                        minChunks: 10,
                        reuseExistingChunk: true,
                        enforce: true
                    }
                }
            }
        }
    };
};

Answer 1

每个x.js文件都是通过代码中的动态导入创建的。

Webpack支持import()＆require.ensure()语法。

它们都支持块命名：

1. import() -有评论

import(/* webpackChunkName: "my-chunk-name" */ 'my-comp');

2. require.ensure() -指定第四个参数

require.ensure(['b'], function(require) {
   var c = require('c');
}, console.error, 'chunkName');
-----------------------^