Question

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

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">

上述行没有将我的index.css加载到浏览器中，而在src / components级别中，我确实有css文件，这些文件已正确打包并分发到bundle.css文件中。

任何帮助都会有很大帮助

Answer 1

css的链接应为：

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

由于publicPath，因此应该像这样。由于未设置，因此默认为/。

Answer 2

css的链接应为：

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

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

2 个答案: