我正在遵循Webpack 网页上的“入门”指南,并且在通过npx webpack
. 由于这是一个非常小的示例文件夹,因此我在此处包含了不同的代码片段:
项目结构:
-/dist
--index.html
-/node_modules
--...
-/src
--index.js
--style.css
-package.json
-webpack.config.js
./dist/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?
谢谢!