Skip to content

Commit 5e3929b

Browse files
hegdeashwinhegdeashwin
committed
Merge pull request #20 from hegdeashwin/develop
Develop
2 parents 11220f7 + dcae1cb commit 5e3929b

21 files changed

+219
-1
lines changed

‎README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
# Learning WEBPACK - MODULE BUNDLER
22

3+
## Table of Content
34
|Eg.No.|Execution Command|Comments|
45
|------|-----------------|--------|
56
|1|```webpack entry.js bundle.js```|Webpack will read entry.js file to build bundle.js|
@@ -15,3 +16,8 @@
1516
|8|```webpack```|Multiple entry files are allowed|
1617
|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|
1718
|10|```webpack```|Shows how to load 3rd-party plugins|
19+
|11|```webpack```|Shows how to load JSON file|
20+
|12|```webpack```|Shows how to load raw file|
21+
|13|```webpack```|Shows how to configure jshint & JSCS loaders for JavaScript linting|
22+
|14|```webpack```|Shows how to load Handlebars templates file|
23+
|15|```webpack```|Shows how to load LESS loader|

‎codes/example-11/content.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
[{
2+
"name": "Ashwin Hegde",
3+
"job": "Software Engineer",
4+
"skills": "JavaScript, Go, Python, PHP, HTML, CSS"
5+
}, {
6+
"name": "Kumar Kundan",
7+
"job": "Manager",
8+
"skills": "SCRUM master"
9+
}, {
10+
"name": "Ajay Sajwan",
11+
"job": "Manager",
12+
"skills": "Kanban master"
13+
}, {
14+
"name": "Saju S",
15+
"job": "Software Analyst",
16+
"skills": "JavaScript, Java, HTML, CSS, ActionScript"
17+
}, {
18+
"name": "Jerin John",
19+
"job": "Software Engineer",
20+
"skills": "JavaScript, Java, HTML, CSS"
21+
}]

‎codes/example-11/entry.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
var json = require('json!./content.json');
2+
3+
console.clear();
4+
console.log("json data: ");
5+
console.log(json);
6+
7+
for(var i=0; i<json.length;i++) {
8+
console.log("Employee Name: " + json[i].name + " - " + json[i].job);
9+
}

‎codes/example-11/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Eg11: json loader</title>
6+
</head>
7+
<body>
8+
<h1>Hello Webpack</h1>
9+
10+
<script type="text/javascript" src="bundle.js"></script>
11+
</body>
12+
</html>

‎codes/example-11/webpack.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
entry: './entry.js',
3+
output: {
4+
filename: 'bundle.js'
5+
}
6+
};

‎codes/example-12/content.txt

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
Hello World,
2+
3+
My name is Ashwin Hegde, I love to work with Open Source Technologies like
4+
JavaScript, Go, Python, PHP, Ruby etc.

‎codes/example-12/entry.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
var fileContent = require('raw!./content.txt');
2+
3+
console.clear();
4+
console.log("Raw data: ");
5+
console.log(fileContent);

‎codes/example-12/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Eg12: txt/raw/file loader</title>
6+
</head>
7+
<body>
8+
<h1>Hello Webpack</h1>
9+
10+
<script type="text/javascript" src="bundle.js"></script>
11+
</body>
12+
</html>

‎codes/example-12/webpack.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
entry: './entry.js',
3+
output: {
4+
filename: 'bundle.js'
5+
}
6+
};

‎codes/example-13/entry.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
function test(a, b) {
2+
var c,d=2;
3+
return a+d;
4+
}
5+
6+
test(1, 2)

‎codes/example-13/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Eg13: JSHint and JSCS loader</title>
6+
</head>
7+
<body>
8+
<h1>Hello Webpack</h1>
9+
10+
<script type="text/javascript" src="bundle.js"></script>
11+
</body>
12+
</html>

‎codes/example-13/webpack.config.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
module.exports = {
2+
entry: './entry.js',
3+
output: {
4+
filename: 'bundle.js'
5+
},
6+
module: {
7+
preLoaders: [{
8+
test: /\.js$/,
9+
exclude: /node_modules/,
10+
loader: "jshint-loader"
11+
}, {
12+
test: /\.js$/,
13+
exclude: /node_modules/,
14+
loader: "jscs-loader"
15+
}]
16+
},
17+
jshint: {
18+
camelcase: true,
19+
strict: true,
20+
unused: true
21+
},
22+
jscs: {
23+
validateIndentation: 2
24+
}
25+
};

‎codes/example-14/content.handlebars

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<h1>Hello, {{name}}</h1>
2+
<h2>{{job}}</h2>

‎codes/example-14/entry.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
var contentTemplate = require('./content.handlebars');
2+
3+
document.addEventListener("DOMContentLoaded", function() {
4+
5+
var container = document.getElementById('container');
6+
container.innerHTML = contentTemplate({
7+
name: "Ashwin Hegde",
8+
job: "Software Engineer"
9+
})
10+
11+
});

‎codes/example-14/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Eg14: Handlebars loader</title>
6+
</head>
7+
<body>
8+
<div id="container"></div>
9+
10+
<script type="text/javascript" src="bundle.js"></script>
11+
</body>
12+
</html>

‎codes/example-14/webpack.config.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = {
2+
entry: './entry.js',
3+
output: {
4+
filename: 'bundle.js'
5+
},
6+
module: {
7+
loaders: [{
8+
test: /\.handlebars$/,
9+
loader: "handlebars-loader"
10+
}]
11+
}
12+
};

‎codes/example-15/entry.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
require('./styles.less');

‎codes/example-15/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Eg15: LESS loader</title>
6+
</head>
7+
<body>
8+
<div id="container">
9+
<h1>Hello World</h1>
10+
<h2>Experiment with Webpack</h2>
11+
</div>
12+
13+
<script type="text/javascript" src="bundle.js"></script>
14+
</body>
15+
</html>

‎codes/example-15/styles.less

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@h1-color: blue;
2+
@h2-color: green;
3+
4+
#container {
5+
h1 {
6+
color: @h1-color;
7+
}
8+
9+
h2 {
10+
color: @h2-color;
11+
}
12+
}

‎codes/example-15/webpack.config.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = {
2+
entry: './entry.js',
3+
output: {
4+
filename: 'bundle.js'
5+
},
6+
module: {
7+
loaders: [{
8+
test: /\.less$/,
9+
loader: 'style-loader!css-loader!less-loader'
10+
}]
11+
}
12+
};

‎package.json

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,26 @@
2222
},
2323
"homepage": "https://github.com/hegdeashwin/learning-webpack#readme",
2424
"devDependencies": {
25-
"css-loader": "^0.23.0",
25+
"autoprefixer-loader": "^3.1.0",
26+
"css-loader": "^0.23.1",
27+
"csslint": "^0.10.0",
28+
"csslint-loader": "^0.2.1",
29+
"eslint": "^1.10.3",
30+
"eslint-loader": "^1.1.1",
31+
"handlebars": "^4.0.5",
32+
"handlebars-loader": "^1.1.4",
33+
"html-loader": "^0.4.0",
34+
"image-webpack-loader": "^1.6.2",
35+
"jscs": "^2.7.0",
36+
"jscs-loader": "^0.2.0",
37+
"jshint": "^2.8.0",
38+
"jshint-loader": "^0.8.3",
39+
"json-loader": "^0.5.4",
40+
"less": "^2.5.3",
41+
"less-loader": "^2.2.2",
2642
"open": "0.0.5",
2743
"open-browser-webpack-plugin": "0.0.1",
44+
"raw-loader": "^0.5.1",
2845
"style-loader": "^0.13.0"
2946
}
3047
}

0 commit comments

Comments
 (0)