add snippets

Author: smmoosavi

README.md

@@ -32,9 +32,17 @@ module.exports = function (webpackConfig, isDevelopment) {
   }
 ```
 
+## Snippets
+You can use [snippets](snippets/) if you want.
+
+snippets:
+- `addPlugin`
+- `findLoader`
+- `addBabelPlugins`
+
 ## Example 
 ### Webpack Visualizer
-I love visualization so I wan't add [webpack-visualizer-plugin][webpack-visualizer] to my project
+I love visualization so I add [webpack-visualizer-plugin][webpack-visualizer] to my project
 - install plugin:
 ```
 npm install webpack-visualizer-plugin --save-dev
@@ -76,7 +84,7 @@ If you love decorators, you can add decorator support:
 ```
 npm install --save-dev babel-plugin-transform-decorators-legacy
 ```
-- edit `webpack.monkey.js` like this:
+- edit `webpack.monkey.js` like this (copy `findLoader`, `addBabelPlugins` from [snippets](snippets/cra-0.9.x.md)):
 ```js
 function findLoader(config, callback) {
     var index = config.module.loaders.findIndex(callback);
@@ -122,9 +130,16 @@ module.exports = function (webpackConfig, isDevelopment) {
 ```
 related issues: [#462][462], [#662][662], [#900][900] 
 ## TODOs
-- [ ] add helpers
+- [ ] <del>add helpers</del> snippets
+  - [x] addPlugin
+  - [x] findLoader
+  - [x] addBabelPlugins
+  - [ ] extract text webpack plugin
+  - [ ] addExclude
+  - [ ] addLoader
 - [ ] customize test runner (jest)
 - [ ] add more example
+  - [ ] postcss
   - [ ] scss support
   - [x] decorator support
   - [x] relay support

snippets/README.md

@@ -0,0 +1,5 @@
+# Code snippets
+
+You need know what happen in monkey brain. So Snippets is better than helpers
+
+- [snippets for cra@0.9.x](cra-0.9.x.md)

snippets/cra-0.9.x.md

@@ -0,0 +1,32 @@
+# Code snippets for create-react-app 0.9.x
+
+## webpack plugin
+
+Add webpack plugin
+```js
+function addPlugin(config, plugin) {
+    config.plugins.push(plugin);
+}
+```
+
+## Find loader
+
+```js
+function findLoader(config, callback) {
+    var index = config.module.loaders.findIndex(callback);
+    if (index === -1) throw Error('Loader not found');
+    return config.module.loaders[index];
+}
+```
+
+## Add Babel plugin
+requirement: `findLoader`
+```js
+function addBabelPlugins(webpackConfig, plugins) {
+    var babelLoader = findLoader(webpackConfig, function (loader) {
+        return loader.loader === 'babel'
+    });
+    babelLoader.query.plugins = (babelLoader.query.plugins || []).concat(plugins);
+}
+
+```