Merge pull request #6 from hegdeashwin/develop

Ashwin Hegde · Ashwin Hegde · commit d26d6dd4472a · 2015-12-25T20:50:52.000+05:30
Develop
diff --git a/.gitignore b/.gitignore
@@ -6,6 +6,7 @@ logs
 pids
 *.pid
 *.seed
+*.map
 
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
@@ -15,7 +16,7 @@ lib-cov
 
 # Compiled binary addons (http://nodejs.org/api/addons.html)
 build/Release
-bundle.js
+bundle*.js
 
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
diff --git a/README.md b/README.md
@@ -1,9 +1,16 @@
 # Learning WEBPACK - MODULE BUNDLER
 
-|Example No.|Execution Command|Comments|
-|-----------|-----------------|--------|
-|1, 2| ```webpack entry.js bundle.js``` | |
-|3| |we need the ```css-loader``` to process CSS files. We also need the ```style-loader``` to apply the styles in the CSS file. They need to be installed locally, without ```-g```|
-|4|```webpack entry.js bundle.js --module-bind 'css=style!css'``` | if you are using ```bash``` then use single quotes in Command. Please see https://github.com/webpack/webpack/issues/1453 for more information|
-|5|```webpack``` **OR** ```webpack --progress --colors``` **OR** ```webpack --progress --colors --watch``` | |
-|6|```webpack-dev-server --progress --colors --watch```|webpack-dev-server is a development server, it binds a small express server on localhost:8080 which serves your static assets as well as the bundle |
+|Eg.No.|Execution Command|Comments|
+|------|-----------------|--------|
+|1|```webpack entry.js bundle.js```|Webpack will read entry.js file to build bundle.js|
+|2|```webpack entry.js bundle.js -p``` |```-p``` is used for bundle minification|
+|2|```webpack entry.js bundle.js -d```|```-d``` is used for bundle with source maps|
+|3|```webpack entry.js bundle.js --progress```|Know the progress of building the bundle|
+|3|```webpack entry.js bundle.js --colors```|Display text in colors|
+|4|```webpack entry.js bundle.js```|we need the ```css-loader``` to process CSS files. We also need the ```style-loader``` to apply the styles in the CSS file. They need to be installed locally, without ```-g```|
+|5|```webpack entry.js bundle.js --module-bind 'css=style!css'``` | This will simplify the CSS require path. Note: If you are using ```bash``` then use single quotes in Command. Please see https://github.com/webpack/webpack/issues/1453 for more information|
+|6|```webpack```|Webpack will read ```webpack.config.js``` from the root directory to build bundle.js|
+|7|```webpack --watch```|Will keep a watch on files to automatically rebuild the bundle|
+|7|```webpack-dev-server```|webpack-dev-server is a development server, it binds a small express server on localhost:8080 which serves your static assets as well as the bundle|
+|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|
diff --git a/codes/example-1/index.html b/codes/example-1/index.html
@@ -2,9 +2,11 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Example 1</title>
+    <title>Eg1: initial bundle</title>
   </head>
   <body>
+    <h1>Hello World</h1>
+    
     <script type="text/javascript" src="bundle.js"></script>
   </body>
 </html>
diff --git a/codes/example-2/index.html b/codes/example-2/index.html
@@ -2,9 +2,11 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Example 2</title>
+    <title>Eg2: building minified bundle</title>
   </head>
   <body>
+    <h1>Hello World</h1>
+    
     <script type="text/javascript" src="bundle.js"></script>
   </body>
 </html>
diff --git a/codes/example-3/content.js b/codes/example-3/content.js
@@ -1 +1 @@
-console.log("Hello webpack");
+module.exports = "Hello webpack";
diff --git a/codes/example-3/entry.js b/codes/example-3/entry.js
@@ -1,5 +1,3 @@
 console.log("Hello World");
 
-require("!style!css!./style.css");
-
-console.log(require("./content.js"));
+console.log(require('./content.js'));
diff --git a/codes/example-3/index.html b/codes/example-3/index.html
@@ -2,9 +2,11 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Example 3</title>
+    <title>Eg3: building bundle with source map</title>
   </head>
   <body>
+    <h1>Hello World</h1>
+    
     <script type="text/javascript" src="bundle.js"></script>
   </body>
 </html>
diff --git a/codes/example-3/style.css b/codes/example-3/style.css
diff --git a/codes/example-4/entry.js b/codes/example-4/entry.js
@@ -1,5 +1,5 @@
 console.log("Hello World");
 
-require("./style.css");
+require("!style!css!./style.css");
 
 console.log(require("./content.js"));
diff --git a/codes/example-4/index.html b/codes/example-4/index.html
@@ -2,9 +2,11 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Example 4</title>
+    <title>Eg4: CSS-Loader</title>
   </head>
   <body>
+    <h1>Hello Webpack</h1>
+
     <script type="text/javascript" src="bundle.js"></script>
   </body>
 </html>
diff --git a/codes/example-4/style.css b/codes/example-4/style.css
@@ -1,3 +1,7 @@
 body {
-  background: green;
+  background: yellow;
+}
+
+h1 {
+  color: blue;
 }
diff --git a/codes/example-5/index.html b/codes/example-5/index.html
@@ -2,9 +2,11 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Example 5</title>
+    <title>Eg8: Multi entry files</title>
   </head>
   <body>
+    <h1>Hello Webpack</h1>
+
     <script type="text/javascript" src="bundle.js"></script>
   </body>
 </html>
diff --git a/codes/example-5/style.css b/codes/example-5/style.css
@@ -1,3 +1,7 @@
 body {
-  background: blue;
+  background: green;
+}
+
+h1 {
+  color: black;
 }
diff --git a/codes/example-6/index.html b/codes/example-6/index.html
@@ -2,12 +2,11 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Example 6</title>
+    <title>Eg6: Add webpack.config</title>
   </head>
   <body>
-    <h1>Hello World!</h1>
-    <h2>Welcome to webpack!</h2>
-    <h3>Learn by practice</h3>
+    <h1>Hello Webpack</h1>
+    
     <script type="text/javascript" src="bundle.js"></script>
   </body>
 </html>
diff --git a/codes/example-6/style.css b/codes/example-6/style.css
@@ -1,16 +1,7 @@
 body {
-  background: black;
-  font-family: arial;
+  background: blue;
 }
 
 h1 {
-  color: white;
-}
-
-h2 {
   color: yellow;
 }
-
-h3 {
-  color: pink;
-}
diff --git a/codes/example-7/content.js b/codes/example-7/content.js
@@ -0,0 +1 @@
+console.log("Hello webpack");
diff --git a/codes/example-7/entry.js b/codes/example-7/entry.js
@@ -0,0 +1,5 @@
+console.log("Hello World");
+
+require("./style.css");
+
+console.log(require("./content.js"));
diff --git a/codes/example-7/index.html b/codes/example-7/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Eg7: Enable Watch and Dev server</title>
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+    <h2>Welcome to Webpack!</h2>
+    <h3>Learn by practice</h3>
+
+    <script type="text/javascript" src="bundle.js"></script>
+  </body>
+</html>
diff --git a/codes/example-7/style.css b/codes/example-7/style.css
@@ -0,0 +1,16 @@
+body {
+  background: black;
+  font-family: arial;
+}
+
+h1 {
+  color: white;
+}
+
+h2 {
+  color: yellow;
+}
+
+h3 {
+  color: pink;
+}
diff --git a/codes/example-7/webpack.config.js b/codes/example-7/webpack.config.js
diff --git a/codes/example-8/content.js b/codes/example-8/content.js
@@ -0,0 +1 @@
+console.log("Hello Ashwin");
diff --git a/codes/example-8/entry-1.js b/codes/example-8/entry-1.js
@@ -0,0 +1,5 @@
+console.log("Hello Webpack 1");
+
+require("./style.css");
+
+console.log(require("./content.js"));
diff --git a/codes/example-8/entry-2.js b/codes/example-8/entry-2.js
@@ -0,0 +1,5 @@
+console.log("Hello Webpack 2");
+
+require("./style.css");
+
+console.log(require("./content.js"));
diff --git a/codes/example-8/entry.js b/codes/example-8/entry.js
@@ -0,0 +1,5 @@
+console.log("Hello World");
+
+require("./style.css");
+
+console.log(require("./content.js"));
diff --git a/codes/example-8/index.html b/codes/example-8/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Example 6</title>
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+    <h2>Welcome to webpack!</h2>
+    <h3>Learn by practice</h3>
+    <script type="text/javascript" src="bundle1.js"></script>
+    <script type="text/javascript" src="bundle2.js"></script>
+  </body>
+</html>
diff --git a/codes/example-8/style.css b/codes/example-8/style.css
@@ -0,0 +1,16 @@
+body {
+  background: black;
+  font-family: arial;
+}
+
+h1 {
+  color: white;
+}
+
+h2 {
+  color: yellow;
+}
+
+h3 {
+  color: pink;
+}
diff --git a/codes/example-8/webpack.config.js b/codes/example-8/webpack.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+  entry: {
+    bundle1: './entry-1.js',
+    bundle2: './entry-2.js'
+  },
+  output: {
+    path: __dirname,
+    filename: '[name].js'
+  },
+  "module": {
+    loaders: [{
+      test: /\.css$/,
+      loader: 'style!css'
+    }]
+  }
+};
diff --git a/codes/example-9/content-1.js b/codes/example-9/content-1.js
@@ -0,0 +1 @@
+module.exports = "Content 1";
diff --git a/codes/example-9/content-2.js b/codes/example-9/content-2.js
@@ -0,0 +1 @@
+module.exports = "Content 2";
diff --git a/codes/example-9/entry.js b/codes/example-9/entry.js
@@ -0,0 +1,7 @@
+console.log("Hello World");
+
+console.log(require('./content-1.js'));
+
+if(window.location.href.indexOf('load') !== -1 ) {
+    console.log(require('./content-2.js'));
+}
diff --git a/codes/example-9/index.html b/codes/example-9/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Eg9: Code splitting and loading files on demand</title>
+  </head>
+  <body>
+    <h1>Hello Webpack</h1>
+
+    <script type="text/javascript" src="bundle.js"></script>
+  </body>
+</html>
diff --git a/codes/example-9/webpack.config.js b/codes/example-9/webpack.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  entry: './entry.js',
+  output: {
+    filename: 'bundle.js'
+  }
+};

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-console.log("Hello webpack");`
	`1`	`+module.exports = "Hello webpack";`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,7 @@`
`1`	`1`	`body {`
`2`		`- background: green;`
	`2`	`+ background: yellow;`
	`3`	`+}`
	`4`	`+`
	`5`	`+h1 {`
	`6`	`+ color: blue;`
`3`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,7 @@`
`1`	`1`	`body {`
`2`		`- background: blue;`
	`2`	`+ background: green;`
	`3`	`+}`
	`4`	`+`
	`5`	`+h1 {`
	`6`	`+ color: black;`
`3`	`7`	`}`