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
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
import todoApp from './reducers'; let store = createStore(todoApp)I would assume you have a single store and is shared. Therefore, the reducers would be packed into a common bundle which both entry bundle will be able to access and consume.users.js and invoices.js needed different redux stores. If they rely on completely different stores, bundling works just as any other modules, anything unique to users.js or invoices.js would be bundled inside of it correspondingly.