react-scripts

This package includes scripts and configuration used by Create React App.

Changes in this fork

I added the possibility of patching webpack configs. So you can switch on css-modules or add sass-loader if you want.

How to use

1. Set version of react-scripts in your package.json to https://github.com/ezhlobo/react-scripts.git#use-custom-config.

2. Run npm update react-scripts.

3. Update scripts in package.json:

"scripts": {
"start": "WEBPACK_CONFIG_PATH=./config/webpack.config.dev.js react-scripts start",
"build": "WEBPACK_CONFIG_PATH=./config/webpack.config.prod.js react-scripts build",

3. Create your config files in ./config. Here's an example how to do patches:

constgeneralConfig=require('react-scripts/config/webpack.config.dev');// Switch on css-modulesgeneralConfig.module.loaders[1].loader='style!css?module!postcss';module.exports=generalConfig;

Take a look at default configs here: ezhlobo/react-scripts/tree/use-custom-config/config.

It's an advanced guide. Feel free to ask about it by sending an email to ezhlobo@gmail.com or by creating an issue.

How to keep relevant version with original repository

This fork will be updated when original react-scripts will be changed. I'll do it manually for now so we can get a delay. Feel free to email me (ezhlobo@gmail.com) or create an issue. I'll respond in two days.

How I use it in production

I want to provide an example how I use this fork for my projects.

1. Firstly I created ./config/patcher.js to do patches for dev and prod configs by the same way.

classPatcher{staticisCssLoader(handler){returnhandler.test.toString().indexOf('\\.css')>-1;}constructor(config){this.config=config;returnthis;}patchLoader(test,patch){this.config.module.loaders.forEach(handler=>{if(test(handler)){patch(handler);}})returnthis;}patchCssLoader(patch){returnthis.patchLoader(Patcher.isCssLoader,patch);}}module.exports=Patcher;

2. I patch dev config in ./config/webpack.config.dev.js:

constPatcher=require('./patcher');constgeneralConfig=require('react-scripts/config/webpack.config.dev');module.exports=newPatcher(generalConfig).patchCssLoader(handler=>{handler.loader='style!css?module!postcss';}).config;

3. I patch prod config in ./config/webpack.config.prod.js:

constPatcher=require('./patcher');constgeneralConfig=require('react-scripts/config/webpack.config.prod');constExtractTextPlugin=require('extract-text-webpack-plugin');module.exports=newPatcher(generalConfig).patchCssLoader(handler=>{handler.loader=ExtractTextPlugin.extract('style','css?-autoprefixer&module!postcss');}).config;