我正在遵循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？
谢谢！
好吧，没关系，我发现我做错了什么。由于打字快，我把module.exports和module.export搞混了。我认为这个问题是封闭的，因为从我的角度来看，这是一个明显的失败。