javascript - Webpack CSS问题，缺少bundle.css

我正在使用webpack来添加对es6的支持，做出反应以及其他一些事情。

现在我遇到错误了：

拒绝应用“ http://localhost:5500/bundle.css”中的样式，因为它的MIME类型（“ text / html”）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。

因此，我检查了Google chrome开发人员工具中的“源”选项卡，并且bundle.css甚至不存在。我在做什么错了？

这是我的webpack配置：


    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
        })
      ]
    };

Webpack CSS问题，缺少bundle.css

1 个答案: