CODEWITHSUNDEEP
javascriptconfigwebpack
Evan
Evan

Reputation: 6115

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?

Upvotes: 8

Views: 1478

Answers (2)

Evan
Evan

Reputation: 6115

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.

Upvotes: 5

Mike
Mike

Reputation: 894

Have you tried using conditional comments to load the proper scripts based on browser vendor?

<!--[if IE]>
    <script src="framework.ie.js"/>
    <script src="0.bundle.ie.js"/>
<![endif]-->

<!--[if !IE]> -->
    <script src="framework.js"/>
    <script src="0.bundle.js"/>
<!-- <![endif]-->

Upvotes: 0

Related Questions