Better way to manage webpack config

[stereobooster]

I suppose I'm not the only one who finds Webpack configuration hard to maintain.

Configurations are not portable/sharable: there is no (good) way to pack configs in modules and reuse across a project. I want to be able to do something like install module webpack-sass-config and it will work out of the box with reasonable defaults (Convention over configuration).

As of now default way to share code across projects is copy/paste. Including this project which patches initial webpack (and this is error prone and hard to maintain).

I know this is problem of webpack not this repo, but this problem is big part of this project which is why I'm creating issue here. Maybe we can come up with reasonable solution.

There are some projects which tried to solve this:

• https://github.com/mdreizin/webpack-config by @mdreizin
• https://github.com/jakubbabiak/webpack-configurator by @jakubbabiak
• https://github.com/lewie9021/webpack-configurator by @lewie9021

---

related: facebook#670

[mdreizin]

@stereobooster as author of webpack-config I'm happy to help you and answer on any questions.

I created my projects to solve the same issues that you have.
For instance webpack-config works with shareable configs out of the box.

PS: Also I would mention webpack-merge by @bebraw.

[jbach]

I agree that merging config with the default react-scripts would be better than trying to maintain a fork thereof. This project states that it

is not a fork of create-react-app. It's just a fork of react-scripts with simple babel/webpack modifications that can toggle extra features.

But after creating the app, react-scripts or in this case custom-react-scripts is almost everything you work with. Constantly keeping up with react-scripts might not be sustainable.

[stereobooster]

Other question to ask if CRA team want to open doors for such projects and adopt any of listed above techniques, like webpack-config, so projects like this code create plugins rather than support fork.

Open source tools tip: integrations are the killer feature. Reach out to people, help tools recognize each other, make them work in unison.

— Dan Abramov (@dan_abramov) October 5, 2016

Offtopic: interesting that gulp shares same problem - easiest way to share code is copy-paste and you spend a lot of time on project setup. But gulp feels a bit more comfortable for me, because program in JS much easier than to program in JSON.

[kitze]

Closing this for now. The way that the config is managed in webpack is not a major priority right now. Something similar is also being discussed in the create-react-app repo.

[bebraw]

@kitze Yeah. If you have time, consider giving webpack-merge a quick go. I expect it would go a long way if you could provide a place where to literally extend the core configs. You would have to intercept before passing the configuration to webpack but after that you could do quite a few things.

I guess the main problem is that you would be operating against a black box still. I expect simple configuration, like adding a new loader or plugin, would be easy, but for anything more complicated than that you would have to eject. Still, that would be far better than the current situation I think as staying without ejecting as long as possible would be extreme useful when it comes to maintenance.

[stereobooster]

Found another interesting approach https://medium.com/@tacomanator/customizing-create-react-app-aa9ffb88165#.fo1dq49rf

[stereobooster]

one more in collection https://github.com/andywer/webpack-blocks