Я следую руководству «Начало работы» на веб-странице Webpack и получаю сообщение об ошибке при запуске процесса сборки через npx webpack. Поскольку это очень маленькая папка с примерами, я включаю сюда различные фрагменты кода:
Структура проекта:
-/dist
--index.html
-/node_modules
--...
-/src
--index.js
--style.css
-package.json
-webpack.config.js
./расстояние/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Getting Started</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
./src/index.js
import _ from "lodash";
import './style.css';
function component() {
const element = document.createElement('div');
element.innerHTML = _.join(["Hello", "webpack"], ' ');
element.classList.add('hello')
return element
}
document.body.appendChild(component());
./src/style.css
.hello {
color: red;
}
пакет.json
{
...
"devDependencies": {
"css-loader": "^5.0.1",
"style-loader": "^2.0.0",
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0"
},
"dependencies": {
"lodash": "^4.17.20"
},
}
webpack.config.js
const path = require("path");
module.export = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
};
при запуске npx webpack - в соответствии с инструкциями в учебнике и, как ожидается, для создания вывода проекта - вместо этого я получаю следующую ошибку:
ERROR in ./src/style.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .hello {
| color: red;
| }
@ ./src/index.js 2:0-21
Насколько я понимаю, код css в порядке, и проект настроен правильно.
Я что-то упустил или я должен сообщить об этом как об ошибке в Webpack?
Спасибо!
