mini-css-extract-plugin配置之后css文件打包成功但就是没有效果呢

Question

webpack.config.js配置

const path = require('path'); 
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module:{
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    { loader: 'css-loader', options: { importLoaders: 1 } },
                    'postcss-loader',
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css',
            chunkFilename: '[id].[contenthash].css',
            ignoreOrder: false,
        }),
    ]
}

运行之后

这个应该是成功了吧？但是为啥页面完全没有效果呢（没有我添得背景还有字体颜色）？
如果去掉MiniCssExtractPlugin.loader它改成'style-loader'就可以了，啥问题呢求解？### 问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

粘贴代码文本（请勿用截图）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

css-loader：把css文件变成commonjs模块加载到js中，里面的内容是样式字符串
style-loader：创建style标签，添加js中的样式字符串，插入head头

所以你使用了style-loader就可以看到效果

既然你要用 MiniCssExtractPlugin 抽离css文件，
那就是想单独引入，所以就不需要style-loader

没有生效的原因我猜是因为你没有引入抽离出来的css文件
1、手动引入一下
2、使用htmlWebpackPlugin