update readme and snippets

Author: smmoosavi

Diff for: README.md

@@ -60,7 +60,7 @@ Note: returned value of `require` function is mutable. so you can mutate that be
 
 ## Snippets
 
-You can use [snippets](snippets/cra-2.x.x.md) if you want.
+You can use [snippets](snippets/cra-4.x.x.md) if you want.
 
 snippets:
 
@@ -91,7 +91,7 @@ Also, you can find complete examples at [monkey-react-scripts-example] repo
 
 The `.babelrc` file is enabled for tests if you have `webpack.monkey.js` file. also, you can enable `.babelrc` for build and start:
 
-- edit `webpack.monkey.js` like this (copy `findRule`, `findBabelRule` from [snippets](snippets/cra-2.x.x.md)):
+- edit `webpack.monkey.js` like this (copy `findRule`, `findBabelRule` from [snippets](snippets/cra-4.x.x.md)):
 
 ```js
 function findRule(webpackConfig, callback) {

Diff for: snippets/README.md

@@ -4,3 +4,6 @@ You need know what happen in monkey brain. So Snippets is better than helpers
 
 - [snippets for [email protected]](cra-0.9.x.md)
 - [snippets for [email protected]](cra-1.x.x.md)
+- [snippets for [email protected]](cra-2.x.x.md)
+- [snippets for [email protected]](cra-3.x.x.md)
+- [snippets for [email protected]](cra-4.x.x.md)

Diff for: snippets/cra-3.x.x.md

@@ -0,0 +1,35 @@
+# Code snippets for create-react-app 1.x.x
+useful codes you can copy and use in webpack.monkey.js file.
+
+In real project I copy some of them in other file and use require function:
+
+## webpack plugin
+
+Add webpack plugin
+```js
+function addPlugin(webpackConfig, plugin) {
+    webpackConfig.plugins.push(plugin);
+}
+```
+## Find Rule
+
+```js
+function findRule(webpackConfig, callback) {
+    const rules = webpackConfig.module.rules[2].oneOf;
+    const index = rules.findIndex(callback);
+    if (index === -1) throw Error('Loader not found');
+    return rules[index]
+}
+```
+
+## find Babel rule
+requirement: `findRule`
+```js
+function findBabelRule(webpackConfig, plugins) {
+    // find babel rule
+    const babelRule = findRule(webpackConfig, (rule) => {
+        return ('' + rule.test === '' + /\.(js|jsx)$/)
+    });
+    return babelRule;
+}
+```

Diff for: snippets/cra-4.x.x.md

@@ -0,0 +1,35 @@
+# Code snippets for create-react-app 1.x.x
+useful codes you can copy and use in webpack.monkey.js file.
+
+In real project I copy some of them in other file and use require function:
+
+## webpack plugin
+
+Add webpack plugin
+```js
+function addPlugin(webpackConfig, plugin) {
+    webpackConfig.plugins.push(plugin);
+}
+```
+## Find Rule
+
+```js
+function findRule(webpackConfig, callback) {
+    const rules = webpackConfig.module.rules[1].oneOf;
+    const index = rules.findIndex(callback);
+    if (index === -1) throw Error('Loader not found');
+    return rules[index]
+}
+```
+
+## find Babel rule
+requirement: `findRule`
+```js
+function findBabelRule(webpackConfig, plugins) {
+    // find babel rule
+    const babelRule = findRule(webpackConfig, (rule) => {
+        return ('' + rule.test === '' + /\.(js|jsx)$/)
+    });
+    return babelRule;
+}
+```