How to add plugins to Webpack?

[veenedu]

I want to add custom plugin to webpack build

I went to below location, modified the file and it worked.

root/node_modules/react_scripts/config/webpack.config.prod.js

Is there a better way of doing this. I don't like this.

I tried create+modify below file but that doesn't way

root/webpack.config.prod.js

Is there a correct way of doing that I don't know?

[gaearon]

What plugin do you want to use?

We currently don't allow (or plan to allow) this for reasons explained in #460 and #99.

So if you want to customize anything, you have to run npm run eject which gives you full freedom and copies configs to your project folder. The downside is that you won't get automatic updates and enhancements to Create React App curated configuration that we are working on.

If you think some plugin is so good that it should be shipped by default please let us know. We want the provided experience to be the best we can do as long as we can keep it with zero configuration on the user side.

[veenedu]

Hello Dan (@gaearon)

I knownpm run eject, and I don't want to use it, for the reason you have already specified. I just read #460 and #99 mentioned by you and that makes sense.

This is what I am trying to do

I am building an APP that runs on iOS, Android, Mac(Electron), UWP, Chrome, Web.
App shares 85% percent of code, problem is with build process, I have to manually set a variable specifying target device. I want to set a NODE environment variable, that webpack.config file reads, and then webpack either inject the device variable(received from node enviornment) in app-codes or pick files based on extension like file1.mac.js or file.wup.js.

So in my opinion I need a way to set node environment variable, that webpack can read. I would love to know is there another better way of doing this.

Thanks.

[gaearon]

So in my opinion I need a way to set node environment variable, that webpack can read. I would love to know is there another better way of doing this.

Yes, it will be available in the next version: https://github.com/facebookincubator/create-react-app/blob/master/template/README.md#adding-custom-environment-variables.

0.3.0 is not out yet but you can use 0.3.0-alpha if you really want this feature right now. To do that, you would need to set react-scripts in your package.json to 0.3.0-alpha and run npm install. Then you can follow these instructions.

[googol7]

It would be nice if I could use these Webpack plugins from Bugsnag (automated crash detection platform) to upload source maps and report builds: https://docs.bugsnag.com/build-integrations/webpack/