multiple outputs for webpack

Question

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?

Ateev Chopra · Accepted Answer · 2016-10-09 07:43:29Z

2

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

answered Oct 9, 2016 at 7:43

Ateev Chopra

1,0243 gold badges16 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

multiple outputs for webpack

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related