From 8a4d961124460a104a339f1f43918298f37d6940 Mon Sep 17 00:00:00 2001
From: zuiidea <zuiiidea@gmail.com>
Date: Sun, 11 Sep 2016 19:01:59 +0800
Subject: [PATCH] css-loder

---
 .gitignore        |  3 +++
 package.json      |  9 +++++----
 src/index.html    |  2 +-
 webpack.config.js | 40 ++++++++++++++++++++++++++--------------
 4 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/.gitignore b/.gitignore
index bcb2a9e..72579f9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,6 @@
 # node
 node_modules
 npm-debug.log
+
+#other
+dist
diff --git a/package.json b/package.json
index 57e36ce..99fe6bc 100644
--- a/package.json
+++ b/package.json
@@ -23,14 +23,14 @@
     "babel-preset-es2015": "6.3.13",
     "babel-preset-react": "6.3.13",
     "babel-preset-stage-0": "6.5.0",
-    "css-loader": "0.23.1",
+    "css-loader": "^0.25.0",
     "eslint": "2.7.0",
     "eslint-config-airbnb": "6.x",
     "eslint-plugin-react": "4.x",
     "file-loader": "0.9.0",
     "html-webpack-plugin": "^2.22.0",
     "less": "2.7.1",
-    "less-loader": "2.2.3",
+    "less-loader": "^2.2.3",
     "lesshint": "2.0.2",
     "react": "15.0.2",
     "react-cookie": "0.4.7",
@@ -46,15 +46,16 @@
     "webpack-dev-server": "1.14.1"
   },
   "dependencies": {
+    "extract-text-webpack-plugin": "^1.0.1",
     "superagent": "2.0.0"
   },
   "scripts": {
     "build": "webpack --progress --colors --display-error-details",
     "prod": "NODE_ENV=production webpack --progress --colors --config webpack.config.prod.js -p --display-error-details",
-    "clean": "rm dist/bundle*",
+    "clean": "rd /s /q dist",
     "dev": "webpack-dev-server --devtool eval --progress --colors --content-base dist --hot --inline --display-error-details",
     "eslint": "eslint --ext .js,.jsx src/view",
     "stylelint": "stylelint \"src/**/*.css\"",
     "lesshint": "lesshint src/"
   }
-}
+}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index fb39177..7bcdea0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,6 +9,6 @@
 
 <body>
   <div id="root" style="height:100%;"></div>
+  <script src="http://localhost:8080/webpack-dev-server.js"></script>
 </body>
-<script src="http://localhost:8080/webpack-dev-server.js"></script>
 </html>
diff --git a/webpack.config.js b/webpack.config.js
index e39f879..8265e78 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,5 +1,6 @@
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require("extract-text-webpack-plugin")
 
 const babelLoaderConfig = {
   presets: ['es2015', 'stage-0', 'react'],
@@ -20,7 +21,7 @@ module.exports = {
 
   output: {
     path: __dirname + '/dist',
-    filename: 'js/bundle.js',
+    filename: 'bundle.js',
   },
 
   resolve: {
@@ -33,19 +34,29 @@ module.exports = {
 
   module: {
     loaders: [{
-      test: /\.jsx?$/,
-      loaders: ['react-hot', 'babel-loader?' + JSON.stringify(babelLoaderConfig)],
-      exclude: /node_modules/,
-    }, {
-      test: /\.css$/,
-      loader: 'style!css',
-    }, {
-      test: /\.less$/,
-      loader: 'style!css!less',
-    }, {
-      test: /\.(png|jpg|svg)$/,
-      loader: 'url?limit=25000',
-    }, ],
+        test: /\.jsx?$/,
+        loaders: ['react-hot', 'babel-loader?' + JSON.stringify(babelLoaderConfig)],
+        exclude: /node_modules/,
+      },
+      // {
+      //   test: /\.css$/,
+      //   loader: 'style!css',
+      // }, {
+      //   test: /\.less$/,
+      //   loader: 'style!css!less',
+      // },
+      {
+        test: /\.css$/,
+        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
+      }, {
+        test: /\.less$/,
+        loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
+      },
+      {
+        test: /\.(png|jpg|svg)$/,
+        loader: 'url?limit=25000',
+      },
+    ],
   },
 
   plugins: [
@@ -54,6 +65,7 @@ module.exports = {
       filename: 'index.html',
       template: './src/index.html'
     }),
+    new ExtractTextPlugin("[name].css"),
     new webpack.DefinePlugin({
       __DEV__: JSON.stringify(JSON.parse(process.env.NODE_ENV === 'production' ? 'false' : 'true')),
     }),