11# monkey-react-scripts
22Monkey react script runner: Customize react-scripts webpack config without eject or fork
33
4- Many of you want to add small change to your webpack config created by create-react-app. but you don't want to eject. or
4+ Many of you want to add a small change to your webpack config created by create-react-app. but you don't want to eject. or
55use other scripts like [ configurable-react-scripts] [ configurable-react-scripts ] or
66[ custom-react-scripts] [ custom-react-scripts ] because of update delay.
77
@@ -16,7 +16,7 @@ something, be completely sure what you doing!
1616
1717[ source] [ configurable-react-scripts ]
1818## Usage
19- - use create-react-app and create your project, [ more- detail] [ create-react-app ]
19+ - use create-react-app and create your project, [ more detail] [ create-react-app ]
2020```
2121npm install -g create-react-app
2222
@@ -30,7 +30,7 @@ cd my-app/
3030npm install monkey-react-scripts --save-dev --save-exact
3131```
3232
33- - create ` webpack.monkey.js ` in root of your project. you can modify webpack config here.
33+ - create ` webpack.monkey.js ` in the root of your project. you can modify webpack config here.
3434``` js
3535module .exports = function (webpackConfig , isDevelopment ) {
3636 // mutate webpackConfig
@@ -61,13 +61,13 @@ snippets:
6161- ` addRule `
6262
6363## Example
64- Before use examples you should know what happen inside react-scripts webpack config.
65- first see and read this files:
64+ Before use examples, you should know what happens inside react-scripts webpack config.
65+ first, see and read this files:
6666
6767- ` node_modules/react-scripts/config/webpack.config.dev.js `
6868- ` node_modules/react-scripts/config/webpack.config.prod.js `
6969
70- also you can log ` webpackConfig ` value.
70+ also, you can log ` webpackConfig ` value.
7171
7272``` js
7373// webpack.monkey.js
@@ -76,15 +76,15 @@ module.exports = function (webpackConfig, isDevelopment) {
7676};
7777```
7878
79- Also you can find complete examples at [ monkey-react-scripts-example] repo
79+ Also, you can find complete examples at [ monkey-react-scripts-example] repo
8080
8181### Webpack Visualizer
82- I love visualization so I add [ webpack-visualizer-plugin] [ webpack-visualizer ] to my project
82+ I love visualization so, I add [ webpack-visualizer-plugin] [ webpack-visualizer ] to my project
8383- install plugin:
8484```
8585npm install webpack-visualizer-plugin --save-dev
8686```
87- - add plugin to config (only at build)
87+ - add the plugin to config (only at build time )
8888``` js
8989// webpack.monkey.js
9090var Visualizer = require (' webpack-visualizer-plugin' );
@@ -193,7 +193,7 @@ similar code for less or stylus.
193193related issues: [ #78 ] [ 78 ] , [ #115 ] [ 115 ] , [ #351 ] [ 351 ] , [ #412 ] [ 412 ] , [ #1509 ] [ 1509 ] , [ #1639 ] [ 1639 ]
194194
195195## postcss config
196- If you want change postcss config you can use this code.
196+ If you want to change postcss config you can use this code.
197197``` js
198198 // add rtl css support
199199 const postCssFunction = postCssLoader .options .plugins
@@ -214,6 +214,7 @@ If you want change postcss config you can use this code.
214214| :-------------:| :--------------------:|
215215| 0.9.x | 0.0.5 |
216216| 1.x.x | 0.1.0 |
217+ | 2.x.x | 0.1.2 |
217218
218219
219220## Thanks
0 commit comments