Adds LESS loader egs + updates package & readme.md

hegdeashwin · hegdeashwin · commit dcae1cb36c1e · 2015-12-26T19:21:40.000+05:30
diff --git a/README.md b/README.md
@@ -1,5 +1,6 @@
 # Learning WEBPACK - MODULE BUNDLER
 
+## Table of Content
 |Eg.No.|Execution Command|Comments|
 |------|-----------------|--------|
 |1|```webpack entry.js bundle.js```|Webpack will read entry.js file to build bundle.js|
@@ -19,3 +20,4 @@
 |12|```webpack```|Shows how to load raw file|
 |13|```webpack```|Shows how to configure jshint & JSCS loaders for JavaScript linting|
 |14|```webpack```|Shows how to load Handlebars templates file|
+|15|```webpack```|Shows how to load LESS loader|
diff --git a/codes/example-15/entry.js b/codes/example-15/entry.js
@@ -0,0 +1 @@
+require('./styles.less');
diff --git a/codes/example-15/index.html b/codes/example-15/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Eg15: LESS loader</title>
+  </head>
+  <body>
+    <div id="container">
+      <h1>Hello World</h1>
+      <h2>Experiment with Webpack</h2>
+    </div>
+
+    <script type="text/javascript" src="bundle.js"></script>
+  </body>
+</html>
diff --git a/codes/example-15/styles.less b/codes/example-15/styles.less
@@ -0,0 +1,12 @@
+@h1-color: blue;
+@h2-color: green;
+
+#container {
+  h1 {
+    color: @h1-color;
+  }
+
+  h2 {
+    color: @h2-color;
+  }
+}
diff --git a/codes/example-15/webpack.config.js b/codes/example-15/webpack.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  entry: './entry.js',
+  output: {
+    filename: 'bundle.js'
+  },
+  module: {
+    loaders: [{
+      test: /\.less$/,
+      loader: 'style-loader!css-loader!less-loader'
+    }]
+  }
+};
diff --git a/package.json b/package.json
@@ -22,13 +22,16 @@
   },
   "homepage": "https://github.com/hegdeashwin/learning-webpack#readme",
   "devDependencies": {
-    "css-loader": "^0.23.0",
+    "autoprefixer-loader": "^3.1.0",
+    "css-loader": "^0.23.1",
     "csslint": "^0.10.0",
     "csslint-loader": "^0.2.1",
     "eslint": "^1.10.3",
     "eslint-loader": "^1.1.1",
     "handlebars": "^4.0.5",
     "handlebars-loader": "^1.1.4",
+    "html-loader": "^0.4.0",
+    "image-webpack-loader": "^1.6.2",
     "jscs": "^2.7.0",
     "jscs-loader": "^0.2.0",
     "jshint": "^2.8.0",
