Javascript 如何用webpack加载CSS文件

我正在尝试将src文件夹中的CSS文件复制到构建时的dist文件夹中-我当前在我的dist中使用HTML文件-即我没有使用javascript文件，因此不希望将样式创建为javascript。我只需要将文件复制到dist中。这是我当前的配置，不起作用

const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    devServer:{
      port:8000
    },
    module: {
        rules: [
            {
                test: /\.html$/i,
                loader: 'html-loader',
            },
            {
              test: /\.css$/i,
              use: [ 'style-loader','css-loader'],
            },
            {
              test: /\.(png|jpe?g|gif|glb|gltf|typeface.json)$/i,
              loader: 'file-loader',
              options: {
                  publicPath: './',
                  name: '[name].[ext]'
              },
          },
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './src/index.html',
            filename: './index.html'
        })
    ]
}

然后我使用一个link标记将css添加到index.html文件中，例如

 <link rel="stylesheet" href="./style.css">

但这只是将javascript添加到它在dist中构建的HTML文件中

我该怎么做

***编辑：我试图添加CSS文件，但没有将它们合并到我的Javascript文件中

您可以尝试使用。如文件中所述：

这个插件将CSS提取到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件。它支持按需加载CSS和SourceMaps

要使用它，您可以首先安装它，导入它，将加载程序和插件添加到您的网页配置中。以下是一个示例（请注意顺序必须正确）：

---

它还将为index.html结果中的css文件添加一个自动链接标记。

您需要将样式加载器和css加载器作为一个模块使用。我正在使用这两个模块-检查我的帖子对不起，我误解了您的问题。请检查这个链接，这似乎是关于HTML而不是CSS。也许我的问题在视频的结尾没有用恰当的措辞，Brad从包中提取了css文件。对不起，我在外面，没有时间在这里写下答案

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

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.css$/i,
        use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader'],
      },
      ...
    ],
  },
  plugins: [
    ...
    new MiniCssExtractPlugin(),
  ],
};