Bolboa Bolboa - 1 year ago 208
React JSX Question

multiple outputs for webpack

I want to separate my react app in two parts. There will be a login page that authenticates a valid user, and once authenticated, I will render the actual web app. For this to happen I figure I will need two html files.

I figure each html file will probably use two different bundles. So my

would probably use the following script...

<script type="text/javascript" src='./scripts/bundle.js'></script>

and my
will use...

<script type="text/javascript" src='./scripts/bundle2.js'></script>

But how can I output two bundles in webpack?

Here is what I have...

module.exports = {
entry: {'./src'},

devtool: 'source-map',
output: {
filename: 'scripts/bundle.js',
publicPath: '/'

module: {

As you can see my only entry point is
this is where my current
file is located to populate my

file used to populate my
is located in foler
. But the following entry won't do what I want...

entry: {'./src', '/Authentication'}

I need two outputs for each of these html files as they are essentiall separated from one other. What are my options here? Is there a way, or perhaps an alternative, to achieve what I want?

Answer Source

It's pretty common to split your bundles into multiple files. Webpack's documentation gives a nice explanation for this - Link

So if you want to have multiple entry points for the app, just pass it as key: value pair in the entry point like this:

    entry: {
        a: "./a",
        b: "./b",
        c: ["./c", "./d"]
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].entry.js"

The final files generated will be a.entry.js, b.entry.js and so on..

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download