Merge pull request #2 from iSpring/develop

merge deveop into master

Author: iSpring

README.md

@@ -42,7 +42,7 @@ React技术栈系列教程，涉及React、Redux、Babel、Webpack等相关技
 - Webpack
   1. [使用Webpack加载ES6模块、ADM模块、CommonJS模块](https://github.com/iSpring/babel-webpack-react-redux-tutorials/tree/master/tutorials/load-commonjs-amd-es6-modules-with-webpack/README.md)
   2. [使用Webpack加载打包npm包](https://github.com/iSpring/babel-webpack-react-redux-tutorials/tree/master/tutorials/bundle-npm-packages-with-webpack/README.md)
-  3. [使用Webpack加载CSS](https://github.com/iSpring/babel-webpack-react-redux-tutorials/blob/master/tutorials/load-css-with-webpack/README.md)
+  3. [使用Webpack加载CSS、SASS、LESS资源并集成PostCSS](https://github.com/iSpring/babel-webpack-react-redux-tutorials/blob/master/tutorials/load-css-with-webpack/README.md)
   4. 使用ExtractTextPlugin分离CSS
   5. 使用Webpack加载图片
   6. Webpack Code Splitting

images/webpack.svg

@@ -2,7 +2,7 @@
   <img src="https://github.com/iSpring/babel-webpack-react-redux-tutorials/blob/master/tutorials/load-css-with-webpack/images/CSS.png" />
 </p>
 
-# 使用Webpack加载CSS、SASS、LESS
+# 使用Webpack加载CSS、SASS、LESS资源并集成PostCSS
 
 本节将探讨如何使用Webpack加载CSS、SASS、LESS等资源，并结合PostCSS进行CSS后处理。
 
@@ -17,7 +17,7 @@
  - autoprefixer
  - precss
 
-本文的Demo项目最终结构如下所示：
+本文项目最终结构如下所示：
 ```
 Project
   |--buildOutput

tutorials/use-extract-text-webpack-plugin/images/what-is-webpack.png renamed to images/what-is-webpack.png

@@ -1,11 +1,11 @@
 var path = require("path");
 
 module.exports = {
-    entry: "./index.js",
-    output: {
-        path: path.join(__dirname, "buildOutput"),
-        filename: "bundle.js"
-    },
+    // entry: "./index.js",
+    // output: {
+    //     path: path.join(__dirname, "buildOutput"),
+    //     filename: "bundle.js"
+    // },
 
 
     // entry: ["./a.css","./b.scss","./c.less","./d.css"],
@@ -15,15 +15,15 @@ module.exports = {
     // },
 
 
-    // entry: {
-    //     js: "./index.js",
-    //     css: ["./css/a.css", "./css/b.scss", "./css/c.less", "./css/d.css"]
-    // },
+    entry: {
+        js: "./index.js",
+        css: ["./css/a.css", "./css/b.scss", "./css/c.less", "./css/d.css"]
+    },
 
-    // output: {
-    //     path: path.join(__dirname, "buildOutput"),
-    //     filename: "[name].bundle.js"
-    // },
+    output: {
+        path: path.join(__dirname, "buildOutput"),
+        filename: "[name].bundle.js"
+    },
 
     module: {
         loaders: [{

tutorials/load-css-with-webpack/README.md

@@ -1,9 +1,44 @@
 <div align="center">
-    <img width="200" height="200" src="https://github.com/iSpring/babel-webpack-react-redux-tutorials/tree/develop/tutorials/use-extract-text-webpack-plugin/images/logo.svg">
-    <a href="https://github.com/webpack/webpack">
-        <img width="200" height="200"
-        src="https://webpack.js.org/assets/icon-square-big.svg">
-    </a>
+    <img width="200" height="200" src="https://cdn.rawgit.com/iSpring/babel-webpack-react-redux-tutorials/master/tutorials/use-extract-text-webpack-plugin/images/plugin.svg">
+    <img width="200" height="200" src="https://cdn.rawgit.com/iSpring/babel-webpack-react-redux-tutorials/master/tutorials/use-extract-text-webpack-plugin/images/webpack.svg">
 </div>
 
-# 使用ExtractTextWebpackPlugin分离CSS
+# 使用ExtractTextWebpackPlugin分离CSS
+我们在上一篇[《使用Webpack和PostCSS加载CSS、SASS、LESS资源》](https://github.com/iSpring/babel-webpack-react-redux-tutorials/blob/master/tutorials/load-css-with-webpack/README.md)中介绍了如何使用Webpack加载CSS、SASS、LESS等相关资源以及如何将PostCSS整合进入Webpack构建过程，在那篇课程中我们将CSS相关资源打包成了一个JavaScript文件。
+
+将多个CSS文件打包成一个JavaScript文件存在如下问题：
+ 1.
+
+
+本文将介绍如何从JavaScript文件中分离出CSS资源并将多个CSS资源打包成一个CSS文件。
+
+本文项目最终结构如下所示：
+```
+Project
+  |--buildOutput
+  |--css
+  |  |--a.css
+  |  |--b.scss
+  |  |--c.less
+  |  |--d.css
+  |
+  |--node_modules
+  |--.babelrc
+  |--browserslist
+  |--index.html
+  |--index.js
+  |--package.json
+  |--postcss.config.js
+  |--README.md
+  |--webpack.config.js
+```
+
+我们在`index.js`中引入了各种CSS文件，如下所示：
+```
+import './a.css';
+import './b.scss';
+import './c.less';
+import './d.css';
+
+console.log("index.js");
+```

tutorials/load-css-with-webpack/webpack.config.js

@@ -31,6 +31,8 @@
         "https://github.com/webpack-contrib/extract-text-webpack-plugin",
         "https://github.com/webpack-contrib/extract-text-webpack-plugin/blob/webpack-1/README.md",
         "https://github.com/webpack-contrib/extract-text-webpack-plugin/tree/webpack-1/example",
-        "https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/50#issuecomment-73011403"
+        "https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/50#issuecomment-73011403",
+        "https://rawgit.com/",
+        "http://stackoverflow.com/questions/13808020/include-an-svg-hosted-on-github-in-markdown"
     ]
 }

tutorials/use-extract-text-webpack-plugin/README.md

@@ -13,19 +13,15 @@ module.exports = {
     module: {
         loaders: [{
             test: /\.js$/,
-            exclude: /(node_modules|bower_components)/,
             loader: 'babel'
         }, {
             test: /\.css$/,
-            exclude: /(node_modules|bower_components)/,
             loader: ExtractTextWebpackPlugin.extract("css!postcss")
         }, {
             test: /\.scss$/,
-            exclude: /(node_modules|bower_components)/,
             loader: ExtractTextWebpackPlugin.extract("css!postcss!sass")
         }, {
             test: /\.less$/,
-            exclude: /(node_modules|bower_components)/,
             loader: ExtractTextWebpackPlugin.extract("css!postcss!less")
         }]
     },