在之前版本中我們使用extract-text-webpack-plugin來(lái)提取CSS文件，不過(guò)在webpack 4.x中則應(yīng)該使用mini-css-extract-plugin來(lái)提取CSS到單獨(dú)文件中

基于webpack 3.0的Vue項(xiàng)目

const?ExtractTextPlugin?=?require('extract-text-webpack-plugin')
config.module.rules.push(
????{
????????test:/\.styl(us)?$/,
????????use:ExtractTextPlugin.extract({
????????????fallback:'style-loader',
????????????use:[
????????????????'css-loader',
????????????????{
????????????????????loader:'postcss-loader',
????????????????????options:{
????????????????????????sourceMap:true
????????????????????}
????????????????},
???????????????'stylus-loader'
???????????????]
????????})
????})
config.plugins.push(
????new?ExtractTextPlugin('styles.[hash:8].css')
)

基于webpack 4.0的Vue項(xiàng)目

const?MiniCssExtractPlugin?=?require('mini-css-extract-plugin')
config.module.rules.push(
????{
????test:/\.styl(us)?$/,
????use:[
????????'style-loader',
????????MiniCssExtractPlugin.loader,
????????'css-loader',
????????{
????????????loader:'postcss-loader',
????????????options:{sourceMap:true}
????????},
????????'stylus-loader'
????????]
????}
config.plugins.push(
????new?MiniCssExtractPlugin(
????????{
????????????filename:?'styles.[contenthash:8].css'
????????}
????)
)

我把contenthash改成了hash就編譯通過(guò)了

util.js

刪掉 ExtractTextPlugin，改用 MiniCssExtractPlugin?

```

if (options.extract) {

let extractLoader = {

loader: MiniCssExtractPlugin.loader,

options: {}

}

return [extractLoader, 'css-loader'].concat(['postcss-loader'], loaders)

} else {

return ['vue-style-loader', 'css-loader'].concat(['postcss-loader'], loaders)

}

```