add demo06

LorinLuo1988 · Aug 14, 2015 · 678a346 · 678a346
1 parent 6c3ac2b
commit 678a346
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 111 deletions.
diff --git a/README.md b/README.md
@@ -72,7 +72,7 @@ There are some command line options you should know.
 1. JSX-loader
 1. CSS-loader
 1. Image loader
-1. Separate CSS file plugin
+1. UglifyJs Plugin
 
 ## Demo01: Entry file ([source](demo01))
 
@@ -154,7 +154,7 @@ index.html
 
 ## Demo03: JSX-loader ([source](demo03))
 
-Loaders are preprocessors which transform a resource file of your app. For example, JSX-loader can transform JSX file into JS file.
+Loaders are preprocessors which transform a resource file of your app. For example, [JSX-loader](https://www.npmjs.com/package/jsx-loader) can transform JSX file into JS file.
 
 main.jsx
 
@@ -193,7 +193,7 @@ module.exports = {
 };
 ```
 
-`module.loaders` is used to assign which loader to load.
+In `webpack.config.js`, `module.loaders` is used to assign loaders.
 
 ## Demo04: CSS-loader ([source](demo04))
 
@@ -242,7 +242,7 @@ module.exports = {
 };
 ```
 
-Attention, you have to use two loaders to transform CSS file. First is CSS-loader to read CSS file, and another is Style-loader to insert Style tag into HTML page. Different loaders are linked by exclamation mark(!).
+Attention, you have to use two loaders to transform CSS file. First is [CSS-loader](https://www.npmjs.com/package/css-loader) to read CSS file, and another is [Style-loader](https://www.npmjs.com/package/style-loader) to insert Style tag into HTML page. Different loaders are linked by exclamation mark(!).
 
 After launching the server, `index.html` will have inline style.
 
@@ -257,9 +257,7 @@ After launching the server, `index.html` will have inline style.
 </head>
 ```
 
-Demo06 will show you how to transform CSS file into a separate file.
-
-## Demo05: Image loader
+## Demo05: Image loader ([source](tree/master/demo05))
 
 Webpack could also require images in JS files.
 
@@ -301,7 +299,7 @@ module.exports = {
 };
 ```
 
-`url-loader` transforms image files. If the image size is bigger than 8192 bytes, it will be transformed into Data URL; otherwise, it will be transformed into normal URL.
+[`url-loader`](https://www.npmjs.com/package/url-loader) transforms image files. If the image size is bigger than 8192 bytes, it will be transformed into Data URL; otherwise, it will be transformed into normal URL. As you see, question mark(?) is be used to pass parameters into loaders.
 
 After launching the server, `small.png` and `big.png` will have the following URLs.
 
@@ -310,7 +308,53 @@ After launching the server, `small.png` and `big.png` will have the following UR
 <img src="4853ca667a2b8b8844eb2693ac1b2578.png">
 ```
 
-## Demo06: Separate CSS file plugin
+## Demo06: UglifyJs Plugin (source)
+
+Webpack has a plugin system to expand its functions. For example, [UglifyJs Plugin](http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) will minify JS codes.
+
+main.js
+
+```javascript
+var longVariableName = 'Hello';
+longVariableName += ' World';
+document.write('<h1>' + longVariableName + '</h1>');
+```
+
+index.html
+
+```html
+<html>
+<body>
+  <script src="bundle.js"></script>
+</boby>
+</html>
+```
+
+webpack.config.js
+
+```javascript
+var webpack = require('webpack');
+var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
+module.exports = {
+  entry: './main.js',
+  output: {
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new uglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    })
+  ]
+};
+```
+
+After launching the server, the `main.js` will be minified into following.
+
+```javascript
+var o="Hello";o+=" World",document.write("<h1>"+o+"</h1>")
+```
 
 ## License
 

diff --git a/demo06/app.css b/demo06/app.css
diff --git a/demo06/bundle.js b/demo06/bundle.js
diff --git a/demo06/index.html b/demo06/index.html
@@ -1,8 +1,5 @@
 <html>
-  <head>
-    <script type="text/javascript" src="bundle.js"></script>
-  </head>
-  <body>
-    <h1>Hello World</h1>
-  </body>
+<body>
+  <script src="bundle.js"></script>
+</boby>
 </html>
diff --git a/demo06/main.js b/demo06/main.js
@@ -1 +1,3 @@
-require('./app.css');
+var longVariableName = 'Hello';
+longVariableName += ' World';
+document.write('<h1>' + longVariableName + '</h1>');
diff --git a/demo06/style.css b/demo06/style.css
diff --git a/demo06/webpack.config.js b/demo06/webpack.config.js
@@ -1,16 +1,15 @@
-var ExtractTextPlugin = require("extract-text-webpack-plugin");
-
+var webpack = require('webpack');
+var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
 module.exports = {
   entry: './main.js',
   output: {
     filename: 'bundle.js'
   },
-  module: {
-    loaders:[
-      { test: /\.css$/, loader:ExtractTextPlugin.extract("style-loader", "css-loader") },
-    ]
-  },
   plugins: [
-    new ExtractTextPlugin("style.css")
+    new uglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    })
   ]
-};
+}
diff --git a/demo07/index.html b/demo07/index.html
diff --git a/demo07/main.js b/demo07/main.js
diff --git a/demo07/webpack.config.js b/demo07/webpack.config.js