Set up CSS modules in production

package.json

@@ -4,8 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "tape -r babel-register -r ./test/setup-jsdom.js test/*-test.js | faucet",
-    "build-prod": "webpack --config webpack.config.prod.js --progress"
+    "build-prod": "webpack --config webpack.config.prod.js --progress",
+    "start": "node dev-server.js"
   },
   "keywords": [],
   "author": "",
@@ -19,6 +19,7 @@
     "css-loader": "0.23.1",
     "enzyme": "2.3.0",
     "express": "4.13.4",
+    "extract-text-webpack-plugin": "1.0.1",
     "faucet": "0.0.1",
     "react-addons-test-utils": "15.1.0",
     "react-hot-loader": "1.3.0",

src/App.js

@@ -15,7 +15,7 @@ export default class App extends React.Component {
 
   render() {
     return (
-      <div className={styles.root}>
+      <div className={styles.app}>
         <p>{ this.state.count }</p>
         <button onClick={() => this.increment()}>Increment</button>
       </div>

src/app.css

@@ -1,3 +1,3 @@
-.root p {
-  color: red;
+.app p {
+  color: green;
 }

webpack.config.prod.js

@@ -1,5 +1,7 @@
 var path = require('path');
 var webpack = require('webpack');
+var combineLoaders = require('webpack-combine-loaders');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 module.exports = {
   entry: './src/index.js',
@@ -8,6 +10,7 @@ module.exports = {
     filename: 'bundle.js'
   },
   plugins: [
+    new ExtractTextPlugin('styles.css'),
     new webpack.DefinePlugin({
       'process.env': {
         'NODE_ENV': JSON.stringify('production')
@@ -19,13 +22,25 @@ module.exports = {
       }
     }),
     new webpack.optimize.OccurenceOrderPlugin(),
-    new webpack.optimize.DedupePlugin()
+    new webpack.optimize.DedupePlugin(),
   ],
   module: {
     loaders: [{
       test: /\.js$/,
       loaders: ['babel'],
       include: path.join(__dirname, 'src')
+    }, {
+      test: /\.css$/,
+      loader: ExtractTextPlugin.extract(
+        'style-loader',
+        combineLoaders([{
+          loader: 'css-loader',
+          query: {
+            modules: true,
+            localIdentName: '[name]__[local]___[hash:base64:5]'
+          }
+        }])
+      )
     }]
   }
 };