Webpack css问题，缺少bundle.css

Question

我正在使用Webpack添加对ES6、react和其他一些东西的支持。

现在我得到了错误：

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

所以我检查了Google Chrome Developer Tools中的sources选项卡，发现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: "<ip address>",
    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包中的，要将其提取到一个文件中供您在WebPack4中构建产品，请使用https://webpack.js.org/plugins/mini-css-extract-plugin/。

旧版本的webpack应该使用https://github.com/webpack-contrib/extract-text-webpack-plugin