我正在完成Odin Project，在第一课上，我们必须使用webpack构建一个webapp。我按照webpack网站上的tutorials hereand here，我能够让它们工作。但是，当我尝试设置自己的文件来构建自己的项目时，我无法加载CSS或index.js文件中的函数。
我设置了相同的目录样式，甚至尝试使用教程中使用的完全相同的index.js文件。

**我希望获得：**一个要加载的网页，上面用红色文本写着“hello webpack”。
相反，我得到这个错误：当我运行$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 1:0-21

在Google上搜索该错误时，我发现了一篇堆栈溢出文章，并尝试按照本文的建议在.config文件中将rules数组重命名为“loaders”，但仍然得到相同的错误。“You may need an appropriate loader to handle this file type” with Webpack and CSS
还有一个奇怪的事实是，我的index.js文件中的一些代码可以工作，而一些代码不能。详细地说，在我运行$npx webpack并加载页面后，我的console.log和alert工作得很好。然而，它们应该在DOM中添加“hello webpack”的功能却没有，因为什么都没有显示出来。页面本身是空白的。
我的index.js代码：

import './style.css';
console.log("console works");
alert("alert works");

function component() {
    const element = document.createElement('div');
 
    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
   element.classList.add('hello');
 
    return element;
  }
 
document.body.appendChild(component());

你会注意到它和webpack教程中的asset management index.js文件几乎完全一样。我这样做是为了尽可能减少我的东西和教程之间的差异。
我不知道这是否是太多的信息，但一个链接到整个回购，因为它目前是建立可以找到here