webpack 2.0从.vue文件里提取出单独的CSS文件

Question

var path = require('path')
var webpack = require('webpack')
var util = require('./util/util.js')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
var config = {
entry: './app/index.js',
output: {

path: path.resolve(__dirname, './src'),
filename: 'build.js',
publicPath:'/'

},
module: {

rules: [
  { test: /\.vue$/,
    loader: 'vue-loader'
  },
  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
  }
]

},
plugins: [

new HtmlWebpackPlugin(),
//webpack自带的压缩JS的插件
new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false
  }
}),
new webpack.LoaderOptionsPlugin({
    test:/\.css$/,
    options: {
        vue: {
            loaders: {
              css: ExtractTextPlugin.extract({fallback:'vue-style-loader', use:'css-loader'}),
            },
        },
    }
}),
new ExtractTextPlugin('css/[name].css')

]
}

webpack(config,function(){

})

这个是webpack配置文件。

<template>

<div>
    <div class="div"></div>
    <div class="div2"></div>
</div>

</template>
<script></script>
<style src="./index.css"></style>
<style>

.div{
    width: 100px;
    height: 100px;
    background-color: red; 
}

</style>
这个是.vue文件。打包出来以后样式是内联在html文件里。用JS动态写入。有点纠结。之前在网上找了很多但是都没没有解决。也看了vue-cli的源码，也没有找到答案。求高手指点指点。

Answer 1

{
                test: /\.vue$/,
                use: [{
                    loader: 'vue-loader',
                    options: {
                        loaders: {
                            css: ExtractTextPlugin.extract(....)
                        }
                    }
                }]
            }