Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding Webpack to existing React app

So I have built the first piece of an app using create-react-app. It by default is using npm for building, running locally, etc...

What I want to do is to move to using Webpack, but not breaking the existing setup and have done some googling, but nothing starts and goes step by step so I can get a better feel for what it is doing and where it is going. Would like to also incorporate using webpack-dev-server with this as well.

That said, I was hoping you guys had some recommendations and maybe also point out some good tutorials for this moving forward?

Thanks much.

like image 542
Mark Avatar asked Nov 09 '17 21:11

Mark


People also ask

Can I add webpack config to create React app?

Create React App (CRA) ships with webpack already under the hood, but usually, we would need to add more configurations as our app grows. Luckily for us, we can create a webpack. config. js file and put our webpack configurations in there.

Is webpack included in React?

Webpack is the recommended bundling solution and should be preferred over Cassette or ASP.NET Bundling. Your project will bundle its own copy of react and react-dom with webpack, and ReactJS.NET will be used only for server-side rendering. Copy from the sample project to the root of your project: package.

Can I add React to an existing project?

Use as little or as much React as you need. React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Perhaps you only want to add some “sprinkles of interactivity” to an existing page.


1 Answers

Create react app uses Webpack. If you want to modify Webpack.config for this project you can run yarn eject/npm eject from here on you are responsible for the Webpack.config so it will be harder to update react scripts.

If you don't want to be responsible for the Webpack.config you could try to use react-app-rewired.

like image 126
root Avatar answered Oct 28 '22 08:10

root