CODEWITHSUNDEEP
javascriptreactjswebpackredux
Marek Sekyra
Marek Sekyra

Reputation: 185

React build multiple files

Is there any way how to split React/Redux application into modules during webpack build? Lets say I have some set of components related to user and others related to invoices. I would like webpack to build users.js and invoices.js which I could import to index.html and as I might change some user related components I would just swap users.js on production server leaving invoices.js untouched.

Is such modularity posssible to implement? Many thanks for answers of any kind

Upvotes: 2

Views: 4878

Answers (1)

Sitian Liu
Sitian Liu

Reputation: 1166

What you are looking for is multiple entry points

In this example you have two (HTML) pages users and invoices. You want to create individual bundles for each page. In addition to this you want to create a shared bundle that contains all modules used in both pages (assuming there are many/big modules in common). The pages also use Code Splitting to load a less used part of the features on demand.

var path = require("path");
var webpack= require("webpack");
module.exports = {
    entry: {
        users: "./users",
        invoices: "./invoices"
    },
    output: {
        path: path.join(__dirname, "js"),
        filename: "[name].bundle.js",
        chunkFilename: "[id].chunk.js"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            filename: "commons.js",
            name: "commons"
        })
    ]
}

here is an more detailed example from webpack itself

Upvotes: 3

Related Questions