css文件无法应用,使用webpack4打包提取不出css文件

使用的是

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']}]}}