Modify webpack.config.js of create-react-app

Question

I want to modify the existing webpack.config.js file of Dan Abramov's create-react-app - I want to add an extra loader 'react-html-attrs' so that I can use class tag as is without changing it to camel-case className

So here is what I did : 1. I went to official github doc of this babel plugin - https://github.com/insin/babel-plugin-react-html-attrs and it said that if you're using babel-6 install npm package: npm install --save-dev babel-plugin-react-html-attrs

and then in one of my component js i returned a jsx containing class instead of classname - but I'm still getting this error message.

How to add custom babel loaders in webpack config of create react app??

Also which one to edit - there are 4 such files in the directory??

Answer 1

Unfortunately it isn't possible to add new babel plugins unless you convert to a custom setup.

By running npm run eject, you will be able to modify the Babel and webpack configs to your liking, with all the (dis)advantages it contains.

Answer 2

Enter your project dir and run

npm run eject

This will extract all of the configuration files for you to edit, including webpack.config.js, to a folder called "config". Enter config/webpack.config.js, find the "return" statement, and inside there is a "resolve" configuration option. Add the following to that object:

symlinks: false