1
1
# monkey-react-scripts
2
2
Monkey react script runner: Customize react-scripts webpack config without eject or fork
3
3
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
5
5
use other scripts like [ configurable-react-scripts] [ configurable-react-scripts ] or
6
6
[ custom-react-scripts] [ custom-react-scripts ] because of update delay.
7
7
@@ -16,7 +16,7 @@ something, be completely sure what you doing!
16
16
17
17
[ source] [ configurable-react-scripts ]
18
18
## 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 ]
20
20
```
21
21
npm install -g create-react-app
22
22
@@ -30,7 +30,7 @@ cd my-app/
30
30
npm install monkey-react-scripts --save-dev --save-exact
31
31
```
32
32
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.
34
34
``` js
35
35
module .exports = function (webpackConfig , isDevelopment ) {
36
36
// mutate webpackConfig
@@ -61,13 +61,13 @@ snippets:
61
61
- ` addRule `
62
62
63
63
## 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:
66
66
67
67
- ` node_modules/react-scripts/config/webpack.config.dev.js `
68
68
- ` node_modules/react-scripts/config/webpack.config.prod.js `
69
69
70
- also you can log ` webpackConfig ` value.
70
+ also, you can log ` webpackConfig ` value.
71
71
72
72
``` js
73
73
// webpack.monkey.js
@@ -76,15 +76,15 @@ module.exports = function (webpackConfig, isDevelopment) {
76
76
};
77
77
```
78
78
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
80
80
81
81
### 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
83
83
- install plugin:
84
84
```
85
85
npm install webpack-visualizer-plugin --save-dev
86
86
```
87
- - add plugin to config (only at build)
87
+ - add the plugin to config (only at build time )
88
88
``` js
89
89
// webpack.monkey.js
90
90
var Visualizer = require (' webpack-visualizer-plugin' );
@@ -193,7 +193,7 @@ similar code for less or stylus.
193
193
related issues: [ #78 ] [ 78 ] , [ #115 ] [ 115 ] , [ #351 ] [ 351 ] , [ #412 ] [ 412 ] , [ #1509 ] [ 1509 ] , [ #1639 ] [ 1639 ]
194
194
195
195
## 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.
197
197
``` js
198
198
// add rtl css support
199
199
const postCssFunction = postCssLoader .options .plugins
@@ -214,6 +214,7 @@ If you want change postcss config you can use this code.
214
214
| :-------------:| :--------------------:|
215
215
| 0.9.x | 0.0.5 |
216
216
| 1.x.x | 0.1.0 |
217
+ | 2.x.x | 0.1.2 |
217
218
218
219
219
220
## Thanks
0 commit comments