Merge pull request #36 from raphaelfabeni/development

Development

README.md

@@ -390,6 +390,9 @@ This loader differs from the other because we have to pass an attribute to it, a
 2. `yarn install` and `yarn serve`
 3. Open => `http://localhost:3000` (if it didn't open automatically)
 4. Make your magic contribution.
+  4.1. Choose a special name for your loader (`loaders-name-you-want`) and add to `loaders.json`. 
+  4.2. Creates the example file inside the `examples` folder (uses the loader name you chose). You can copy one of the examples and make the necessary changes.
+  4.3. Creates the `.sass` files. The first one inside `src` folder which is the root style file for the loader and it will import the other files. And the other one, inside `loaders` folder with the specific style for the loader (both must have the same name you chose  - _loader-name-you-chose_).
 5. Run `yarn build` to create/update the dist files.
 6. Open a _PR_ with a new branch describing your changes. <o/
 

loaders.json

@@ -0,0 +1,17 @@
+{
+	"loaders": [
+		"css-loader",
+		"loader-default",
+		"loader-double",
+		"loader-bar",
+		"loader-bar-ping-pong",
+		"loader-border",
+		"loader-ball",
+		"loader-clock",
+		"loader-smartphone",
+		"loader-curtain",
+		"loader-music",
+		"loader-pokeball",
+		"loader-bouncing"
+	]
+}

webpack.config.js

@@ -1,26 +1,22 @@
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
-var LiveReloadPlugin = require('webpack-livereload-plugin')
-var SassLintPlugin = require('sasslint-webpack-plugin')
-var path = require('path')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const LiveReloadPlugin = require('webpack-livereload-plugin')
+const SassLintPlugin = require('sasslint-webpack-plugin')
+const path = require('path')
+const loaders = require('./loaders.json').loaders
+
+function getEntries() {
+  const tempObj = {}
+  const tempLoaders = loaders.map(loader => {
+    return tempObj[loader] = path.resolve(__dirname, 'src/' + loader + '.sass');
+  });
+
+  return tempObj
+}
 
 module.exports = {
   context: __dirname,
   name: 'css',
-  entry: {
-    'css-loader': path.resolve(__dirname, 'src/css-loader.sass'),
-    'loader-default': path.resolve(__dirname, 'src/loader-default.sass'),
-    'loader-double': path.resolve(__dirname, 'src/loader-double.sass'),
-    'loader-bar': path.resolve(__dirname, 'src/loader-bar.sass'),
-    'loader-bar-ping-pong': path.resolve(__dirname, 'src/loader-bar-ping-pong.sass'),
-    'loader-border': path.resolve(__dirname, 'src/loader-border.sass'),
-    'loader-ball': path.resolve(__dirname, 'src/loader-ball.sass'),
-    'loader-clock': path.resolve(__dirname, 'src/loader-clock.sass'),
-    'loader-smartphone': path.resolve(__dirname, 'src/loader-smartphone.sass'),
-    'loader-curtain': path.resolve(__dirname, 'src/loader-curtain.sass'),
-    'loader-music': path.resolve(__dirname, 'src/loader-music.sass'),
-    'loader-pokeball': path.resolve(__dirname, 'src/loader-pokeball.sass'),
-    'loader-bouncing': path.resolve(__dirname, 'src/loader-bouncing.sass')
-  },
+  entry: getEntries(),
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: '[name].js'