Webpack $：样式加载器未在我的脑海中创建样式标签

Question

样式加载器似乎没有在页面的head标签中生成样式标签。我的代码只有在状态变暖的情况下才能成功编译

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' 
for this value. Set 'mode' option to 'development' or 'production' to enable 
defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: 
https://webpack.js.org/concepts/mode/
i ｢wdm｣: Compiled with warnings.

这归因于我使用在本地主机上运行项目的package.json文件中的“ webpack-dev-server”脚本在本地运行代码的事实

i ｢wds｣: Project is running at http://localhost:8080/

这是我的webpack.config.js文件

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

module.exports = {
    entry: './src/js/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
              test: /\.css$/,
              use: ['style-loader', 'css-loader']
            }
        ]
    }


}

下面是我的app.js文件（我的入口点）中的代码

import './dom-loader';
import '../css/main.css';
import  '../css/input-elements.css';
import _ from 'lodash';

var showSecret = false;

secretButton.addEventListener('click', toggleSecretState);
updateSecretParagraph();

function toggleSecretState() {
    showSecret = !showSecret;
    updateSecretParagraph();
    updateSecretButton()
}

function updateSecretButton() {
    if (showSecret) {
        secretButton.textContent = 'Hide the Secret';
    } else {
        secretButton.textContent = 'Show the Secret';
    }
}

function updateSecretParagraph() {
    if (showSecret) {
        secretParagraph.style.display = 'block';
    } else {
        secretParagraph.style.display = 'none';
    }
}

element.classList.add('body');
element.classList.add('h1');

我导入的javascipt文件似乎工作正常，但是由于某些原因，.css文件未在页面顶部生成所需的样式标签。