CODEWITHSUNDEEP
reactjswebpack
buydadip
buydadip

Reputation: 9437

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?

Upvotes: 1

Views: 883

Answers (1)

Ateev Chopra
Ateev Chopra

Reputation: 1026

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

Upvotes: 2

Related Questions