css-loder

.gitignore

@@ -9,3 +9,6 @@
 # node
 node_modules
 npm-debug.log
+
+#other
+dist

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/"
   }
-}
+}

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>

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')),
     }),