0

我正在遵循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?

谢谢!

4

1 回答 1

1

好吧,没关系,我发现我做错了什么。通过快速打字,我module.exportsmodule.export. 我认为这个问题已经结束,因为从我这边来看,这是一个明显而明显的失败。

于 2020-11-15T10:00:00.267 回答