Webpack 4 chunking different runtime behaviour compared to Webpack 3

webpack-bot commented 6 years ago

Do you want to request a feature or report a bug?

Bug / Change in behaviour compared to Webpack 3

What is the current behavior?

When telling Webpack which chunk the runtime should be in (via runtimeChunk.name), it doesn't appear to change the order of execution - see below example.

If the current behavior is a bug, please provide the steps to reproduce.

vendor.js

import $ from 'jquery';
console.log('vendor run.');
$.fn.sayHi = function() {
    alert('Hi');
};

main.js

import $ from 'jquery';
console.log('main run.');
$.fn.sayHi();

index.htm

<html>
<body>
<script src="dist/vendor.js"></script>
<script src="dist/main.js"></script>
</body>
</html>

Webpack 3 config

var webpack = require('webpack');
var path = require('path');

module.exports = {

    mode: 'production',

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

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

    optimization: {
        minimize: false,
        runtimeChunk: {
            name: 'vendor'
        },
        splitChunks: {
            cacheGroups: {
                default: false,
                commons: {
                    test: /node_modules/,
                    name: "vendor",
                    chunks: "initial",
                    minSize: 1
                }
            }
        }
    }

};

Webpack 4 Result

As you can see, main run fires before vendor, even though the runtime has been put inside vendor and it's loaded first.

Webpack 3 Result

As you can see vendor run fires first, which means plugin is successfully registered and the alert dialog pops up.

This issue was moved from webpack/webpack#6647 by @evilebottnawi. Original issue was by @garygreen.

alexander-akait commented 6 years ago

Please read posts in original issue, a lot of question about undocumented options, feel free to close and break it down into several issue, thanks!

ARDivekar commented 6 years ago

My understanding of optimization.splitChunks with an example use-case. Hope it helps someone!

Also from the previous issue (needs to be said again):

I stumbled upon such a configuration after trying many many variations. Conceptually, I'm not 100% sure why it works (e.g., what is a cacheGroup? How does splitChunks work from a beginner's perspective? What is the initial parameter?)

Better documentation for Webpack 4 would be an enormous help.

Legends commented 6 years ago

@evilebottnawi documentation updates for wp4 go into which branch? rebuild?

alexander-akait commented 6 years ago

@Legends I don't know, i am not maintain this repo

montogeek commented 6 years ago

@Legends master branch

webpack / webpack.js.org