Multiple modules for multiple entry points in webpack config for reactjs app

Question

In case of multiple entry points, this is the example I got:

module.exports = {
    entry: {
        user1: path.join(__dirname, './client/app1.js'),
        user2: path.join(__dirname, './client/app2.js'),
        user3: path.join(__dirname, './client/app3.js')
    },
    output: {
        path: path.join(__dirname, './static/bundle/'),
        filename: '[name].js'
    },
    ...
}

But, I am confused about the term entry. Does it mean the entry url? What if user visits to root and then visits another page?

For example, suppose I have one site example.com and two other pages example.com/register and example.com/contact. Now I want to get common files for example.com and load only register module code in example.com/register and contact module code in example.com/contact. The entry point is same, example.com. Will above solution work in this scenario?

Michael Peyper · Accepted Answer · 2017-05-24T12:32:43.163

But, I am confused about the term entry. Does it mean the entry url?

No. It is the entry for webpack to start bundling. If you have multiple entries in your webpack config, then there will be multiple output bundles. This is why you output uses a [name].js in the filename.

It is up to you to make sure the correct bundle(s) are available to any particular page that is loaded.

Answering question in comment:

If I understand what you are trying to do, I believe you can use CommonsChunkPlugin to construct a common bundle and an entry for each page.

So your webpack config might look something like

module.exports = {
    entry: {
        index: path.join(__dirname, './src/index.js'),
        register: path.join(__dirname, './src/register.js'),
        contact: path.join(__dirname, './src/contact.js')
    },
    output: {
        path: path.join(__dirname, './static/bundle/'),
        filename: '[name].js'
    },
    plugins: [
        new CommonsChunkPlugin("commons.js")
    ]
    ...
}

Then your index page would be something like

<html>
    <head></head>
    <body>
        ...
        <script src="static/bundle/commons.js"></script>
        <script src="static/bundle/index.js"></script>
    </body>
</html>

And the register page would be something like

<html>
    <head></head>
    <body>
        ...
        <script src="static/bundle/commons.js"></script>
        <script src="static/bundle/register.js"></script>
    </body>
</html>

And the contact page would be something like

<html>
    <head></head>
    <body>
        ...
        <script src="static/bundle/commons.js"></script>
        <script src="static/bundle/contact.js"></script>
    </body>
</html>

Thanks for the reply. How can I decide which entry I have? For example, in above case, I have described the scenarios for my site(example.com). Can you please explain in light of this site configuarion? — learner, May 24 '17 at 11:27
Thanks for the insight. This is what I was looking for. One thing more, I am working on react right now. Being a SPA, react has only one index.html file. How can I ensure to load respective bundle in each case? — learner, May 24 '17 at 13:06
If you have a SPA (react doesn't HAVE to be a SPA), then having multiple entries in your webpack config doesn't have much benefit as only the index will actually require ones and rest of the site will be bundled in with the index bundle. Webpack 2 offers some [code-splitting features](https://webpack.js.org/guides/code-splitting/) which can help reduce bundle size and which parts get loaded when, but it is all handled by webpack and the bundle, so you don't have to worry about it when linking the bundles to the html. — Michael Peyper, May 24 '17 at 13:16

Multiple modules for multiple entry points in webpack config for reactjs app

1 Answers1

Linked