css 文件未链接到从 webpack 提供的 index.html 文件中答案

【问题标题】：css file not getting linked in index.html file served from webpackcss 文件未链接到从 webpack 提供的 index.html 文件中
【发布时间】：2019-06-18 01:48:46
【问题描述】：

您好，我的文件夹结构如下：-

node_modules
src
|____components
|____index.css
|____index.html
|____index.js
|____index.scss
.babelrc
package.json
webpack.config.js

我的 webpack.config.js 文件的内容如下：-

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
entry: {
    "index": "./src/index.js",
},
output: {
    path: path.join(__dirname, "/dist"),
    filename: "[name].js",
},
resolve: {
    alias: {
        components: path.resolve(__dirname, "src/components")
    },
    extensions: [".js", ".jsx", ".json"],
    mainFiles: ["index"]
},
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader"
            }
        },
        {
            test: /\.(s*)css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: ["css-loader", "sass-loader"]
            })//["style-loader", "css-loader", "sass-loader"]
        }
    ],
},
plugins: [
    new HtmlWebpackPlugin({
        template: "./src/index.html"
    }),
    new ExtractTextPlugin({
        filename: "bundle.css"
    })
],
watch: true,
}

我的 index.html 文件内容如下：-

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="./index.css">
    <title>React Boilerplate</title>
 </head>

<body>
    <div id="root">

    </div>
</body>

</html>

<link rel="stylesheet" type="text/css" href="./index.css">

在 src/components 级别内，上面的行没有将我的 index.css 加载到浏览器中，我确实有 css 文件，这些文件被正确捆绑并在 bundle.css 文件中交付。

任何帮助都会有很大帮助

【问题讨论】：

标签： reactjs webpack redux webpack-dev-server webpack-4

【解决方案1】：

css的链接应该是：

<link rel="stylesheet" type="text/css" href="/index.css">

由于publicPath，这应该是这样的。由于未设置，默认为/。

【讨论】：

【解决方案2】：

css 的链接应该是：

<link rel="stylesheet" type="text/css" href="../src/index.css">

【讨论】：