[Build] use MiniCssExtractPlugin instead of ExtractTextPlugin (#936)

build/webpack.config.dev.js

@@ -1,7 +1,7 @@
 const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const isProduction = process.env.NODE_ENV === 'production';
 
@@ -41,25 +41,23 @@ module.exports = {
           {
             loader: 'vue-loader',
             options: {
-              preserveWhitespace: false,
-              extractCSS: true
+              preserveWhitespace: false
             }
           }
         ]
       },
       {
         test: /\.js$/,
-        exclude: /node_modules|vue-router\/|vue-loader\//,
+        exclude: /node_modules/,
         use: 'babel-loader'
       },
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({
-          use: [
-            'css-loader',
-            'postcss-loader'
-          ]
-        })
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'postcss-loader'
+        ]
       },
       {
         test: /\.md/,
@@ -69,7 +67,7 @@ module.exports = {
         ]
       },
       {
-        test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
+        test: /\.(woff2?|eot|ttf|svg)(\?.*)?$/,
         loader: 'url-loader'
       }
     ]
@@ -88,9 +86,8 @@ module.exports = {
       filename: 'examples.html',
       inject: true
     }),
-    new ExtractTextPlugin({
-      filename: isProduction ? '[name].[hash:8].css' : '[name].css',
-      allChunks: true
+    new MiniCssExtractPlugin({
+      filename: isProduction ? '[name].[hash:8].css' : '[name].css'
     })
   ]
 };