Modify the webpack configuration to extracting CSS into a single file

PeachScript · PeachScript · commit ff7157a0f784 · 2016-04-29T10:48:24.000+08:00
diff --git a/app/templates/_index.html b/app/templates/_index.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title><%= appname %></title>
+  <link rel="stylesheet" href="dist/bundle.css">
 </head>
 <body>
   <app></app>
diff --git a/app/templates/_package.json b/app/templates/_package.json
@@ -23,6 +23,7 @@
     "eslint-plugin-import": "^1.6.0",
     "eslint-plugin-jsx-a11y": "^1.0.3",
     "eslint-plugin-react": "^5.0.1",
+    "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",
     "html-webpack-plugin": "^2.16.0",
     "less": "^2.6.1",
diff --git a/app/templates/_webpack.config.js b/app/templates/_webpack.config.js
@@ -1,4 +1,5 @@
 var webpack = require('webpack');
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
 
 module.exports = {
   entry: './src/main.js',
@@ -44,11 +45,20 @@ module.exports = {
         }
       }
     ]
-  }
+  },
+  vue: {
+    loaders: {
+      css: ExtractTextPlugin.extract('css'),
+      less: ExtractTextPlugin.extract('css!less')
+    }
+  },
+  plugins: [
+    new ExtractTextPlugin("bundle.css")
+  ]
 };
 
 if (process.env.NODE_ENV === 'production') {
-  module.exports.plugins = [
+  module.exports.plugins = module.exports.plugins.concat([
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: '"production"'
@@ -60,12 +70,10 @@ if (process.env.NODE_ENV === 'production') {
       }
     }),
     new webpack.optimize.OccurenceOrderPlugin()
-  ];
+  ]);
 
-  module.exports.vue = {
-    autoprefixer: {
-      browsers: ['last 2 versions']
-    }
+  module.exports.vue.autoprefixer = {
+    browsers: ['last 2 versions']
   }
 } else {
   module.exports.devtool = '#source-map';
