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

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配置文件。

<div>

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

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

</div>

.div{

width: 100px;

height: 100px;

background-color: red;

}

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

{

test: /\.vue$/,

use: [{

loader: 'vue-loader',

options: {

loaders: {

css: ExtractTextPlugin.extract(....)

}

}

}]

}