javascript - style-loader 不会在 index.html 的 HEAD 部分注入(inject) CSS 代码-6ren

javascript - style-loader 不会在 index.html 的 HEAD 部分注入(inject) CSS 代码

转载作者：行者123 更新时间：2023-12-02 20:54:40

25

4

我是一个 Webpack 新手，我正在遵循一个非常基本的教程。我不明白为什么 style-loader 没有按照教程中的描述在我的 index.html 的 HEAD 标签中注入(inject) CSS 代码。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>It works!</h1>
</body>
<script src="dist/index.js" />
</html>

样式.css

body {
    background-color: red;
}

index.js

import { Template } from './template';
import './style.css';

let customers = [
    {name: "Mario", surname: "Rossi"},
    {name: "Anna", surname: "Verdi"},
    {name: "Carlo", surname: "Bianchi"}
];

let template = new Template('customers');
template.download();
template.render(customers);

模板.js

export class Template {
    constructor(name) {
        this.name = name;
    }

    download() {
        console.log(`Template ${this.name} downloaded`);
    }

    render(data) {
        console.log(data);
    }
}

webpack.config.js

const path = require("path");

module.exports = {
    entry: './src/index.js',
    //mode: 'development',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

应用程序结构

+ dist
--- index.js
+ src
--- index.js
--- template.js
--- style.css
index.html
webpack.config.js

我错过了什么？感谢您的帮助

最佳答案

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>It works!</h1>
    <script src="./index.js"></script>
</body>
<!-- <script src="dist/index.js" /> DELETED -->
</html>

应用程序结构

+ dist
--- index.js
--- index.html (Moved here)
+ src
--- index.js
--- template.js
--- style.css
webpack.config.js

关于javascript - style-loader 不会在 index.html 的 HEAD 部分注入(inject) CSS 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61516920/

25

4

0

文章推荐： javascript - 我需要帮助修复列表数组中的错误

文章推荐： javascript - 将自己的 JavaScript 模块导入转换后的 TypeScript

文章推荐： javascript - ChartJS 悬停工具提示颜色未显示正确的颜色

文章推荐： javascript - 如何更改 Highstock 图表上的 UTC 时间戳？

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

javascript - style-loader 不会在 index.html 的 HEAD 部分注入(inject) CSS 代码