使用webpack4打包提取不出css文件

Question

使用的是 

mini-css-extract-plugin  这个插件，来提取的，下面是我的配置

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

function resolve(dir) {return path.join(__dirname, '..', dir)}

module.exports = {
entry: {
    index: './src/pages/index/js/index.js',fang: './src/pages/fang_list/js/fang_list.js'},
    output: {filename: 'js/[name].[chunkhash:8].js',path: resolve('dist')},
     plugins: [
     new CleanWebpackPlugin(['dist'],{
     root: resolve('./'),
     verbose:true,
     dry:false}),
     new HTMLWebpackPlugin({
     template:'src/pages/index/index.html',
     filename: 'index.html',chunks: ['index']}),
     new HTMLWebpackPlugin({
     template:'src/pages/fang_list/fang_list.html',filename: 'fang_list.html',chunks: ['fang']}),
     new MiniCssExtractPlugin({filename: "[name].css",chunkFilename: "[id].css"})],
     module: {
     rules: [
     {test: /\.js$/,loader: 'babel-loader'},
     {test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000}},
     {test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,}},
     test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,}},
     {test: /\.css$/,use: [MiniCssExtractPlugin.loader,"css-loader"]},
     {test:/\.less$/,use: [MiniCssExtractPlugin.loader,'css-loader','less-loader']}]}}

Answer 1

确认是配置文件写的有误，建议核对相关版本，查看插件官方指引