html - 键入“npm run start”后，CSS 样式表未加载到 html 网页上

Question

我刚刚在我的一个项目中安装了 react、webpack 和 babel（我使用了本教程https://medium.com/swlh/a-complete-webpack-setup-for-react-e56a2edf78ae但我对 webpack 做了一些调整.config.js 文件，因为它给出了错误），现在我的 html 文件的 css 样式表没有链接（当我输入 npm run start 时），我不确定为什么

这就是我链接样式表的方式

<link rel="stylesheet" type="text/css" media="screen" href="index-styles.css">

这是我的 webpack.config.js

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

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    chunkFilename: "[id].js",
    publicPath: ""
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          { loader: "style-loader" },
          {
            loader: "css-loader",
            options: {
              modules: {
                localIdentName: "[name]__[local]___[hash:base64:5]"
              },
              sourceMap: true
            }
          },
          {
            loader: "postcss-loader"
            // postcssOptions: {
            //   ident: "postcss",
            //   options: {

            //   }
            //   //plugins: () => [autoprefixer({})]
            // }
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        loader: "url-loader?limit=10000&name=img/[name].[ext]"
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + "/src/index.html",
      filename: "index.html",
      inject: "body"
    })
  ]
};

现在我的项目结构是

assets 
images 
node_modules
src
|___index-styles.css (one I'm linking to index.html) 
|___index.css (one used in index.js for tutorial) 
|___index.html
|___index.js
.babelrc
package-lock.json
package.json
webpack.config.js

标签： htmlcssreactjswebpack