Webpack css проблема, отсутствует bundle.css

Question

Я использую веб-пакет для добавления поддержки es6, реакции и некоторых других вещей.

Сейчас я получаю сообщение об ошибке:

Отказался от применения стиля из 'http://localhost:5500/bundle.css'потому что его тип MIME ('text / html') не является поддерживаемым типом MIME таблицы стилей, и включена строгая проверка MIME.

Поэтому я проверил вкладку источников в инструментах разработчика Google Chrome, а bundle.css - нет.даже существует.Что я делаю не так?

Вот мой конфиг веб-пакета:

    const path = require("path");
    const webpack = require("webpack");
    const HtmlWebpackPlugin = require("html-webpack-plugin");

    module.exports = {
      entry: "./index.js",
      output: {
        path: path.resolve(__dirname, "/"),
        publicPath: "/",
        filename: "bundle.js"
      },
      mode: "development",
      module: {
        rules: [
          {
            test: /\.(js\jsx)$/,
            exclude: /(node_modules|framework)/,
            loader: require.resolve("babel-loader"),
            options: { presets: ["@babel/preset-env"] }
          },
          {
            test: /\.css$/,
            use: [require.resolve("style-loader"), require.resolve("css-loader")]
          },
          {
            test: /\.scss$/,
            use: [
              require.resolve("style-loader"),
              require.resolve("css-loader"),
              require.resolve("sass-loader")
            ]
          }
        ]
      },
      resolve: { extensions: ["*", ".js", ".jsx"] },
      devServer: {
        port: 5500,
        host: "",
        publicPath: "http://localhost:5500",
        hotOnly: true
      },
      plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
          template: path.resolve(__dirname, "index.html"),
          filename: "index.html",
          inject: true
        })
      ]
    };

Answer 1

По умолчанию css компилируется в комплект js во время dev, чтобы извлечь его в файл для сборки вашего продукта в webpack 4, используйте https://webpack.js.org/plugins/mini-css-extract-plugin/.

В старых версиях webpack следует использовать https://github.com/webpack-contrib/extract-text-webpack-plugin