CODEWITHSUNDEEP
javascriptwebpack
Marco
Marco

Reputation: 789

style-loader does not inject CSS code in HEAD section of index.html

I am a Webpack newbie and I am following a very basic tutorial. I cannot figure out why the style-loader does not inject CSS code in the HEAD tag of my index.html, as described in the tutorial.

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>

style.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);

template.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']
            }
        ]
    }
}

App structure

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

What am I missing? thank you for any help

Upvotes: 0

Views: 550

Answers (1)

Adrien Leloir
Adrien Leloir

Reputation: 503

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>

App structure

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

Upvotes: 0

Related Questions