运行npx webpack时CSS无法加载且index.js部分函数失效求助

我正在学习Odin Project，在Webpack构建Web应用的第一课碰到了问题。跟着Webpack官网的资源管理教程操作时一切正常，但自己搭建项目文件时，出现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

我搜索了Stack Overflow的相关文章，尝试把配置文件里的rules数组改名为'loaders'，但问题依旧没有解决。

奇怪的是，index.js里部分代码能正常运行，部分不行：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教程中的资源管理示例几乎完全一致，我特意尽量减少和教程的差异。

内容的提问来源于stack exchange，提问作者manski