Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webpack numbered chunks not loading correctly per config

So I have two different webpack configs I'm passing in an array that looks something like this:

[
    {
        entry: entrypointsIE,
        output: outputIE,
        module: {
            loaders: [
                  // set of loaders that has one difference to load SCSS variables from a different location
            ]
        },
        resolveLoader: resolveLoader,
        resolve: resolve,
        plugins: plugins,
        devServer: devServer
    },
    {
        entry: entrypoints,
        output: output,
        module: {
            loaders: [
                 // loaders all the same as the IE9 except one difference in sass loader    
            ]
        },
        resolveLoader: resolveLoader,
        resolve: resolve,
        plugins: plugins,
        devServer: devServer
    }
]



output = {
    path: '/web/dist',
    filename: '[name].bundle.js',
    chunkFilename: '[id].bundle.js'
};

outputIE = {
    path: '/web/dist',
    filename: '[name].ie.bundle.js',
    chunkFilename: '[id].ie.bundle.js'
};

and

apps.forEach(function(appName, index) {
    entrypoints[appName] = [ 'webpack/hot/dev-server', appName + '/app' ];
});

appsIE = apps;

appsIE.forEach(function(appName, index) {
    entrypointsIE[appName] = [ 'webpack/hot/dev-server', appName + '/app.ie' ];
});

The entrypoints are the exact same files (and this is where I think my problem is coming from). I have a conditional in my index.html which loads framework.ie.js if it detects IE, and framework.js if it does not. This works as expected. The problem is that it does not load the numbered chunks consistently. Sometimes I see 0.bundle.js getting loaded, and sometimes I see 0.bundle.ie.js getting loaded (regardless of whether framework.ie.js or framework.js got loaded).

Is there some way to make it consistently load the correct chunk or is there a way to just make sure that everything I need just gets loaded into the framework bundles without any chunks getting loaded by webpack?

like image 281
Evan Avatar asked Jul 17 '15 18:07

Evan


People also ask

How do I reduce the size of a Webpack bundle?

webpack bundle optimize helper: This tool will analyze your bundle and give you actionable suggestions on what to improve to reduce your bundle size. bundle-stats: Generate a bundle report (bundle size, assets, modules) and compare the results between different builds.

What is the maximum size of a Webpack file?

Webpack has some clever defaults that aren’t so clever, like a maximum of 3 files when splitting the output files, and a minimum file size of 30 KB (all smaller files would be joined together). So I have overridden these. cacheGroups is where we define rules for how Webpack should group chunks into output files.

Is Webpack preload bad for performance?

Using webpackPreload incorrectly can actually hurt performance, so be careful when using it. Once you start splitting your code, it can be useful to analyze the output to check where modules have ended up. The official analyze tool is a good place to start.

What is code splitting in Webpack?

This guide extends the example provided in Getting Started. Please make sure you are at least familiar with the example provided there and the Output Management chapter. Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel.


1 Answers

Found the solution. Adding:

new webpack.optimize.LimitChunkCountPlugin({maxChunks: 1}

Made it so my entrypoint chunks were the only ones created and so the logic works correctly.

like image 100
Evan Avatar answered Sep 30 '22 00:09

Evan