Я новичок в Webpack ie и следую очень основному учебнику c. Я не могу понять, почему загрузчик стилей не вставляет код CSS в тег HEAD моего индекса. html, как описано в руководстве.
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']
}
]
}
}
Структура приложения
+ dist
--- index.js
+ src
--- index.js
--- template.js
--- style.css
index.html
webpack.config.js
Чего мне не хватает? спасибо за любую помощь