CODEWITHSUNDEEP
javascriptwebpackwebpack-4chunksentry-point
FTWinston
FTWinston

Reputation: 1066

Entry point in a webpack common chunk

My webpack configuration has a "common" chunk that's used by multiple entry points. In addition to containing code used by multiple entry points, I'd like this to also call a function on load.

I tried making a "common" entry point with the same name as the chunk, but though I can see the common file's content in the generated output, it doesn't run on load.

I assume this is because of the following, from Webpack's splitChunksPlugin documentation:

If the splitChunks.name matches an entry point name, the entry point will be removed.

Is there a way around this, to get a "common" chunk to run something on load?

My webpack config's entry is:

entry: {
    common: './src/entryPoints/common.tsx',
    entry1 './src/entryPoints/entry1.tsx',
    entry2: './src/entryPoints/entry2.tsx'
}

and its optimisation.splitChunks is:

splitChunks: {
    cacheGroups: {
        common: {
            name: 'common',
            chunks: 'all',
            minChunks: 2,
            priority: 1,
            enforce: true
        },
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            chunks: 'all',
            priority: 3,
        }
    }
}

For test purposes, common.tsx just contains:

import '../misc/polyfills';

console.log('COMMON ENTRY POINT');

Thanks in advance.

Upvotes: 3

Views: 1332

Answers (1)

FTWinston
FTWinston

Reputation: 1066

In the absence of a better solution, I'm currently "solving" this by modifying the entry object as shown:

entry: {
    entry1: [
        './src/entryPoints/common.tsx',
        './src/entryPoints/entry1.tsx'
    ]
    entry2: [
        './src/entryPoints/common.tsx',
        './src/entryPoints/entry2.tsx'
    ]
}

With the example shown, this results in the logged message showing on a page loading any entry point. The message itself is contained in the common chunk, as desired.

If multiple entry points are loaded on the one page, however, it shows twice, which means that real code would need to check if it had already run. That's less than ideal, but will do if necessary.

Upvotes: 2

Related Questions