Bolboa Bolboa - 2 months ago 33
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

login.html
would probably use the following script...

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


and my
index.html
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: {
path:'/',
filename: 'scripts/bundle.js',
publicPath: '/'
},

module: {
...etc,etc.


As you can see my only entry point is
/src
this is where my current
index.js
file is located to populate my
index.html
.

The
index.js
file used to populate my
login.html
is located in foler
Authentication
. 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

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..