Webpack - How to require an entry bundle inside another javascript file

Question

I have 2 entry points: One for the main app, and one for legacy part of the app.

The legacy.js, is being bundled just as I want it to, like so:

module.exports = {
    entry: {
        app: ['file1', 'file2'],
        legacy: ['legacyfile1', 'legacyfile2'],
    },
    devtool: 'source-map',
    context: path.resolve(__dirname, 'src'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        filename: 'js/[name].js'
    },
    plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        chunks: ['app'] // Only include app bundle - Legacy will be required in the legacy javascript file.js at runtime.
    }),
}

This generates the two bundles, and only the app.js bundle is injected into index.html.

Then inside legacy.js, I want to require the legacy bundle at the top of the file, something like this (all does not work, Webpack can not find the modules):

require('./dist/js/legacy.js');
require('./js/legacy.js');
require('dist/js/legacy.js');
require('/js/legacy.js');

How is it possible with Webpack to require a Webpack bundled file into a javascript file at runtime?

Thanks for those who find the time to consider this!

Son Nguyen Son Nguyen · Accepted Answer · 2020-06-26T10:52:19

Webpack bundles each entry point into a normal script file which does not export anything. So you can't require or import it.

One solution (other than sharing code via global scope) is to find the common sharable code of both bundles, and extract it into a separate module so you can import it from either codebase.

Webpack - How to require an entry bundle inside another javascript file

1 Answers