add new demo of CSS Module

LorinLuo1988 · Aug 20, 2015 · 2675638 · 2675638
1 parent 2a1fc0f
commit 2675638
Show file tree

Hide file tree

Showing 32 changed files with 308 additions and 199 deletions.
diff --git a/README.md b/README.md
@@ -86,13 +86,14 @@ To produce a production ready application, you could write `scripts` field in yo
 1. [JSX-loader](#demo03-jsx-loader-source)
 1. [CSS-loader](#demo04-css-loader-source)
 1. [Image loader](#demo05-image-loader-source)
-1. [UglifyJs Plugin](#demo06-uglifyjs-plugin-source)
-1. [Environment flags](#demo07-environment-flags-source)
-1. [Common chunk](#demo08-common-chunk-source)
-1. [Vendor chunk](#demo09-vendor-chunk-source)
-1. [Exposing Global Variables](#demo10-exposing-global-variables-source)
-1. [React hot loader](#demo11-react-hot-loader-source)
-1. [React router](#demo12-react-router-source)
+1. [CSS Module](#demo06-css-module-source)
+1. [UglifyJs Plugin](#demo07-uglifyjs-plugin-source)
+1. [Environment flags](#demo08-environment-flags-source)
+1. [Common chunk](#demo09-common-chunk-source)
+1. [Vendor chunk](#demo10-vendor-chunk-source)
+1. [Exposing Global Variables](#demo11-exposing-global-variables-source)
+1. [React hot loader](#demo12-react-hot-loader-source)
+1. [React router](#demo13-react-router-source)
 
 ## Demo01: Entry file ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo01))
 
@@ -326,7 +327,78 @@ After launching the server, `small.png` and `big.png` will have the following UR
 <img src="4853ca667a2b8b8844eb2693ac1b2578.png">
 ```
 
-## Demo06: UglifyJs Plugin ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo06))
+## Demo06: CSS Module ([source]https://github.com/ruanyf/webpack-demos/tree/master/demo06))
+
+`css-loader?modules` （the query parameter modules) enables the [CSS Modules](https://github.com/css-modules/css-modules) spec.
+
+It means your module's  CSS is Local scoped CSS by default. You can switch it off with :global(...) or :global for selectors and/or rules. ([more info](https://css-modules.github.io/webpack-demo/))
+
+index.html
+
+```html
+<html>
+<body>
+  <h1 class="h1">Hello World</h1>
+  <h2 class="h2">Hello Webpack</h2>
+  <div id="example"></div>
+  <script src="./bundle.js"></script>
+</body>
+</html>
+```
+
+app.css
+
+```css
+.h1 {
+  color:red;
+}
+
+:global(.h2) {
+  color: blue;
+}
+```
+
+main.jsx
+
+```javascript
+var React = require('react');
+var style = require('./app.css');
+
+React.render(
+  <div>
+    <h1 className={style.h1}>Hello World</h1>
+    <h2 className="h2">Hello Webpack</h2>
+  </div>,
+  document.getElementById('example')
+);
+```
+
+webpack.config.js
+
+```javascript
+module.exports = {
+  entry: './main.jsx',
+  output: {
+    filename: 'bundle.js'
+  },
+  module: {
+    loaders:[
+      { test: /\.js[x]?$/, exclude: /node_modules/, loader: 'jsx-loader' },
+      { test: /\.css$/, loader: 'style-loader!css-loader?modules' }
+    ]
+  }
+};
+```
+
+Launch the server.
+
+```bash
+$ webpeck-dev-server
+```
+
+Visit http://127.0.0.1:8080 , you'll find that only second `h1` is red, because its CSS is local scoped, and both `h2` is blue, because its CSS is global scoped.
+
+## Demo07: UglifyJs Plugin ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo07))
 
 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.
 
@@ -374,7 +446,7 @@ After launching the server, `main.js` will be minified into following.
 var o="Hello";o+=" World",document.write("<h1>"+o+"</h1>")
 ```
 
-## Demo07: Environment flags ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo07))
+## Demo08: Environment flags ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo08))
 
 You can enable some codes only in development environment with environment flags.
 
@@ -422,7 +494,7 @@ Now pass environment variable into webpack.
 $ env DEBUG=true webpack-dev-server
 ```
 
-## Demo08: Common chunk ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo08))
+## Demo09: Common chunk ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo09))
 
 When multi scripts have common chunks, you can extract the common part into a separate file with CommonsChunkPlugin.
 
@@ -480,7 +552,7 @@ module.exports = {
 }
 ```
 
-## Demo09: Vendor chunk ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo09))
+## Demo10: Vendor chunk ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo10))
 
 You can also extract the vendor libraries from a script into a separate file with CommonsChunkPlugin.
 
@@ -549,7 +621,7 @@ module.exports = {
 };
 ```
 
-## Demo10: Exposing global variables ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo10))
+## Demo11: Exposing global variables ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo11))
 
 If you want to use some global variables, and don't want to includes them in the Webpack bundle, you can enable `externals` field in `webpack.config.js` ([official document](http://webpack.github.io/docs/library-and-externals.html)).
 
@@ -594,7 +666,7 @@ React.render(
 );
 ```
 
-## Demo11: React hot loader ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo11))
+## Demo12: React hot loader ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo12))
 
 This demo is copied from [React hot boilerplate](https://github.com/gaearon/react-hot-boilerplate).
 
@@ -680,7 +752,7 @@ module.exports = {
 };
 ```
 
-## Demo12: React router ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo12))
+## Demo13: React router ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo13))
 
 This demo uses webpack to build [React-router](https://github.com/rackt/react-router/blob/0.13.x/docs/guides/overview.md)'s official example.
 

diff --git a/demo06/app.css b/demo06/app.css
@@ -0,0 +1,7 @@
+.h1 {
+  color:red;
+}
+
+:global(.h2) {
+  color: blue;
+}
diff --git a/demo06/index.html b/demo06/index.html
@@ -1,5 +1,8 @@
 <html>
 <body>
-  <script src="bundle.js"></script>
-</boby>
+  <h1 class="h1">Hello World</h1>
+  <h2 class="h2">Hello Webpack</h2>
+  <div id="example"></div>
+  <script src="./bundle.js"></script>
+</body>
 </html>
diff --git a/demo06/main.js b/demo06/main.js
diff --git a/demo06/main.jsx b/demo06/main.jsx
@@ -0,0 +1,10 @@
+var React = require('react');
+var style = require('./app.css');
+
+React.render(
+  <div>
+    <h1 className={style.h1}>Hello World</h1>
+    <h2 className="h2">Hello Webpack</h2>
+  </div>,
+  document.getElementById('example')
+);
diff --git a/demo06/webpack.config.js b/demo06/webpack.config.js
@@ -1,15 +1,12 @@
-var webpack = require('webpack');
-var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
 module.exports = {
-  entry: './main.js',
+  entry: './main.jsx',
   output: {
     filename: 'bundle.js'
   },
-  plugins: [
-    new uglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    })
-  ]
-}
+  module: {
+    loaders:[
+      { test: /\.js[x]?$/, exclude: /node_modules/, loader: 'jsx-loader' },
+      { test: /\.css$/, loader: 'style-loader!css-loader?modules' }
+    ]
+  }
+};
diff --git a/demo07/index.html b/demo07/index.html
@@ -1,5 +1,5 @@
 <html>
 <body>
   <script src="bundle.js"></script>
-</body>
+</boby>
 </html>
diff --git a/demo07/main.js b/demo07/main.js
@@ -1,5 +1,3 @@
-document.write('<h1>Hello World</h1>');
-
-if (__DEV__) {
-  document.write(new Date());
-}
+var longVariableName = 'Hello';
+longVariableName += ' World';
+document.write('<h1>' + longVariableName + '</h1>');
diff --git a/demo07/webpack.config.js b/demo07/webpack.config.js
@@ -1,13 +1,15 @@
 var webpack = require('webpack');
-
-var devFlagPlugin = new webpack.DefinePlugin({
-  __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
-});
-
+var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
 module.exports = {
   entry: './main.js',
   output: {
     filename: 'bundle.js'
   },
-  plugins: [devFlagPlugin]
-};
+  plugins: [
+    new uglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    })
+  ]
+}
diff --git a/demo08/index.html b/demo08/index.html
@@ -1,9 +1,5 @@
 <html>
-  <body>
-    <div id="a"></div>
-    <div id="b"></div>
-    <script src="init.js"></script>
-    <script src="bundle1.js"></script>
-    <script src="bundle2.js"></script>
-  </body>
+<body>
+  <script src="bundle.js"></script>
+</body>
 </html>
diff --git a/demo08/main.js b/demo08/main.js
@@ -0,0 +1,5 @@
+document.write('<h1>Hello World</h1>');
+
+if (__DEV__) {
+  document.write(new Date());
+}
diff --git a/demo08/webpack.config.js b/demo08/webpack.config.js
@@ -1,18 +1,13 @@
-var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
+var webpack = require('webpack');
+
+var devFlagPlugin = new webpack.DefinePlugin({
+  __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
+});
+
 module.exports = {
-  entry: {
-    bundle1: './main1.jsx',
-    bundle2: './main2.jsx'
-  },
+  entry: './main.js',
   output: {
-    filename: '[name].js'
-  },
-  module: {
-    loaders:[
-      { test: /\.js[x]?$/, exclude: /node_modules/, loader: 'jsx-loader' },
-    ]
+    filename: 'bundle.js'
   },
-  plugins: [
-    new CommonsChunkPlugin('init.js')
-  ]
-}
+  plugins: [devFlagPlugin]
+};
diff --git a/demo09/index.html b/demo09/index.html
@@ -1,7 +1,9 @@
 <html>
   <body>
-    <h1></h1>
-    <script src="vendor.js"></script>
-    <script src="bundle.js"></script>
+    <div id="a"></div>
+    <div id="b"></div>
+    <script src="init.js"></script>
+    <script src="bundle1.js"></script>
+    <script src="bundle2.js"></script>
   </body>
 </html>
diff --git a/demo08/main1.jsx → demo09/main1.jsx b/demo08/main1.jsx → demo09/main1.jsx
diff --git a/demo08/main2.jsx → demo09/main2.jsx b/demo08/main2.jsx → demo09/main2.jsx
diff --git a/demo09/webpack.config.js b/demo09/webpack.config.js
@@ -1,14 +1,18 @@
-var webpack = require('webpack');
-
+var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
 module.exports = {
   entry: {
-    app: './main.js',
-    vendor: ['jquery'],
+    bundle1: './main1.jsx',
+    bundle2: './main2.jsx'
   },
   output: {
-    filename: 'bundle.js'
+    filename: '[name].js'
+  },
+  module: {
+    loaders:[
+      { test: /\.js[x]?$/, exclude: /node_modules/, loader: 'jsx-loader' },
+    ]
   },
   plugins: [
-    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */'vendor', /* filename= */'vendor.js')
+    new CommonsChunkPlugin('init.js')
   ]
-};
+}
diff --git a/demo10/index.html b/demo10/index.html
@@ -1,6 +1,7 @@
 <html>
   <body>
-    <script src="data.js"></script>
+    <h1></h1>
+    <script src="vendor.js"></script>
     <script src="bundle.js"></script>
   </body>
 </html>
diff --git a/demo09/main.js → demo10/main.js b/demo09/main.js → demo10/main.js
diff --git a/demo10/webpack.config.js b/demo10/webpack.config.js
@@ -1,17 +1,14 @@
+var webpack = require('webpack');
+
 module.exports = {
-  entry: './main.jsx',
+  entry: {
+    app: './main.js',
+    vendor: ['jquery'],
+  },
   output: {
     filename: 'bundle.js'
   },
-  module: {
-    loaders:[
-      { test: /\.js[x]?$/, exclude: /node_modules/, loader: 'jsx-loader' },
-    ]
-  },
-  externals: {
-    // require("jquery") is external and available
-    //  on the global var jQuery
-    //  "jquery": "jQuery"
-    'data': 'data'
-  }
+  plugins: [
+    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */'vendor', /* filename= */'vendor.js')
+  ]
 };
diff --git a/demo10/data.js → demo11/data.js b/demo10/data.js → demo11/data.js
diff --git a/demo11/index.html b/demo11/index.html
@@ -1,6 +1,6 @@
 <html>
   <body>
-    <div id='root'></div>
-    <script src="/static/bundle.js"></script>
+    <script src="data.js"></script>
+    <script src="bundle.js"></script>
   </body>
 </html>
diff --git a/demo11/index.js b/demo11/index.js
diff --git a/demo10/main.jsx → demo11/main.jsx b/demo10/main.jsx → demo11/main.jsx