Merge pull request #20 from hegdeashwin/develop

hegdeashwin · hegdeashwin · commit 5e3929bf4456 · 2015-12-26T19:26:41.000+05:30
Develop
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|
@@ -15,3 +16,8 @@
 |8|```webpack```|Multiple entry files are allowed|
 |9|```webpack```|Code splitting and loading files on demand, Open browser and try ```localhost:8080``` see content-1 is loaded but not content-2, Now try execute ```localhost:8080/#load``` see content-1 and content-2 are both loaded|
 |10|```webpack```|Shows how to load 3rd-party plugins|
+|11|```webpack```|Shows how to load JSON file|
+|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-11/content.json b/codes/example-11/content.json
@@ -0,0 +1,21 @@
+[{
+  "name": "Ashwin Hegde",
+  "job": "Software Engineer",
+  "skills": "JavaScript, Go, Python, PHP, HTML, CSS"
+}, {
+  "name": "Kumar Kundan",
+  "job": "Manager",
+  "skills": "SCRUM master"
+}, {
+  "name": "Ajay Sajwan",
+  "job": "Manager",
+  "skills": "Kanban master"
+}, {
+  "name": "Saju S",
+  "job": "Software Analyst",
+  "skills": "JavaScript, Java, HTML, CSS, ActionScript"
+}, {
+  "name": "Jerin John",
+  "job": "Software Engineer",
+  "skills": "JavaScript, Java, HTML, CSS"
+}]
diff --git a/codes/example-11/entry.js b/codes/example-11/entry.js
@@ -0,0 +1,9 @@
+var json = require('json!./content.json');
+
+console.clear();
+console.log("json data: ");
+console.log(json);
+
+for(var i=0; i<json.length;i++) {
+    console.log("Employee Name: " + json[i].name + " - " + json[i].job);
+}
diff --git a/codes/example-11/index.html b/codes/example-11/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Eg11: json loader</title>
+  </head>
+  <body>
+    <h1>Hello Webpack</h1>
+
+    <script type="text/javascript" src="bundle.js"></script>
+  </body>
+</html>
diff --git a/codes/example-11/webpack.config.js b/codes/example-11/webpack.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  entry: './entry.js',
+  output: {
+    filename: 'bundle.js'
+  }
+};
diff --git a/codes/example-12/content.txt b/codes/example-12/content.txt
@@ -0,0 +1,4 @@
+Hello World,
+
+My name is Ashwin Hegde, I love to work with Open Source Technologies like
+JavaScript, Go, Python, PHP, Ruby etc.
diff --git a/codes/example-12/entry.js b/codes/example-12/entry.js
@@ -0,0 +1,5 @@
+var fileContent = require('raw!./content.txt');
+
+console.clear();
+console.log("Raw data: ");
+console.log(fileContent);
diff --git a/codes/example-12/index.html b/codes/example-12/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Eg12: txt/raw/file loader</title>
+  </head>
+  <body>
+    <h1>Hello Webpack</h1>
+
+    <script type="text/javascript" src="bundle.js"></script>
+  </body>
+</html>
diff --git a/codes/example-12/webpack.config.js b/codes/example-12/webpack.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  entry: './entry.js',
+  output: {
+    filename: 'bundle.js'
+  }
+};
diff --git a/codes/example-13/entry.js b/codes/example-13/entry.js
@@ -0,0 +1,6 @@
+function test(a, b) {
+    var c,d=2;
+  return a+d;
+}
+
+test(1, 2)
diff --git a/codes/example-13/index.html b/codes/example-13/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Eg13: JSHint and JSCS loader</title>
+  </head>
+  <body>
+    <h1>Hello Webpack</h1>
+
+    <script type="text/javascript" src="bundle.js"></script>
+  </body>
+</html>
diff --git a/codes/example-13/webpack.config.js b/codes/example-13/webpack.config.js
@@ -0,0 +1,25 @@
+module.exports = {
+  entry: './entry.js',
+  output: {
+    filename: 'bundle.js'
+  },
+  module: {
+    preLoaders: [{
+      test: /\.js$/,
+      exclude: /node_modules/,
+      loader: "jshint-loader"
+    }, {
+      test: /\.js$/,
+      exclude: /node_modules/,
+      loader: "jscs-loader"
+    }]
+  },
+  jshint: {
+    camelcase: true,
+    strict: true,
+    unused: true
+  },
+  jscs: {
+    validateIndentation: 2
+  }
+};
diff --git a/codes/example-14/content.handlebars b/codes/example-14/content.handlebars
@@ -0,0 +1,2 @@
+<h1>Hello, {{name}}</h1>
+<h2>{{job}}</h2>
diff --git a/codes/example-14/entry.js b/codes/example-14/entry.js
@@ -0,0 +1,11 @@
+var contentTemplate = require('./content.handlebars');
+
+document.addEventListener("DOMContentLoaded", function() {
+
+  var container = document.getElementById('container');
+  container.innerHTML = contentTemplate({
+    name: "Ashwin Hegde",
+    job: "Software Engineer"
+  })
+  
+});
diff --git a/codes/example-14/index.html b/codes/example-14/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Eg14: Handlebars loader</title>
+  </head>
+  <body>
+    <div id="container"></div>
+
+    <script type="text/javascript" src="bundle.js"></script>
+  </body>
+</html>
diff --git a/codes/example-14/webpack.config.js b/codes/example-14/webpack.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  entry: './entry.js',
+  output: {
+    filename: 'bundle.js'
+  },
+  module: {
+    loaders: [{
+      test: /\.handlebars$/,
+      loader: "handlebars-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,9 +22,26 @@
   },
   "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",
+    "jshint-loader": "^0.8.3",
+    "json-loader": "^0.5.4",
+    "less": "^2.5.3",
+    "less-loader": "^2.2.2",
     "open": "0.0.5",
     "open-browser-webpack-plugin": "0.0.1",
+    "raw-loader": "^0.5.1",
     "style-loader": "^0.13.0"
   }
 }
