CODEWITHSUNDEEP
javascriptreactjs
Sveta
Sveta

Reputation: 1231

Split react code from the app

I've been moving from jQuery to React and need some help understanding how to make webpack to split my code from react itself. I'm using react to build widgets. Each is it's own "app" and multiple of them may be embedded to a non react page. Because of that, I need react included in the page only once (like when using jQuery). I'm currently using create-react-app as it's very easy to start with. Could you please point me into the right direction?

Upvotes: 0

Views: 62

Answers (1)

Felix
Felix

Reputation: 2681

You could work with multiple entries (documentation) if you would like to work with webpack. This may look like the following:

entry: {
  react: ["react", "react-dom"],
  app: ['./index.js']
}

Be aware of the fact that you can't use your own webpack-config in the apps created by create-react-app unless you remove or replace the whole react-scripts part, since they handle all of the webpack staff internal.

If you want to use your components external (like different websites), you should create a package (npm or those alike) for each of those. A different option would be to add everyone of those components as an entry point in the webpack->entry object. But if you want to use them external, this seems to be a huge overhead when serving from different hosts.

Upvotes: 1

Related Questions