CODEWITHSUNDEEP
webpack
doberkofler
doberkofler

Reputation: 10431

Why would webpack 4 generate files named 0.js, 1.js 2.js?

In my attempts to switch from webpack 3 to 4, I use a configuration that simplified looks like the following extract. The build is successful but generates some chunks that have only a number a filename and I cannot seem to understand why?

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]

configuration:

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
                    }
                }
            }
        }
    };
};

Upvotes: 16

Views: 6483

Answers (1)

felixmosh
felixmosh

Reputation: 35603

Each x.js file is created from dynamic import in your code.

Webpack supports import() & require.ensure() syntax.

Both of them supports chunk naming:

  1. import() - with a comment

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

  1. require.ensure() - specifying the 4th parameter
require.ensure(['b'], function(require) {
   var c = require('c');
}, console.error, 'chunkName');
-----------------------^

Upvotes: 10

Related Questions