咱们一步步拆解你遇到的三个问题，逐个解决：

1. 先搞定最直观的Uncaught ReferenceError: element is not defined错误 #

你在index.js里直接用了element变量，但完全没提前获取页面上的DOM元素呀！比如先在你的src/index.html里加个用来放Logo的容器：

<!-- src/index.html -->
<div id="logo-container"></div>

然后在index.js里先拿到这个元素再操作：

// src/js/index.js
import num from './test';
// 路径后面会调整，先看这里的核心修改
import '../css/style.css';
import Logo from '../img/logo.png';

// 先获取页面上的DOM容器
const element = document.getElementById('logo-container');
// 再把图片加进去
const myIcon = new Image();
myIcon.src = Logo;
element.appendChild(myIcon);
console.log(`I imported ${num} from another module test!`);

2. 修复CSS MIME类型错误（Refused to apply style from...） #

你现在导入的是../../dist/css/style.css，但dist是Webpack的打包输出目录，开发时应该从src目录导入源CSS文件才对！假设你的CSS文件存在src/css/style.css，那正确的导入路径应该是../css/style.css（因为index.js在src/js目录下）。

另外你的webpack.config.js里devServer.contentBase设为./dist是没问题的，HtmlWebpackPlugin会自动帮你处理HTML里的资源路径，只要你导入的是源文件就不会出错。

3. 解决PNG图片404错误 #

和CSS的问题一模一样，你现在导入的是../../dist/img/logo.png，但dist/img是打包后的图片位置，开发时得导入src目录下的源图片。假设你的Logo在src/img/logo.png，正确路径是../img/logo.png。

还有，你用Webpack5的asset/resource处理图片是对的（Webpack5已经内置了file-loader/url-loader的功能，不需要再单独装这两个包了）。如果想让图片打包后统一放到dist/img目录，可以给规则加个生成配置：

// webpack.config.js 中的module.rules
{
  test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
  type: "asset/resource",
  generator: {
    filename: 'img/[name].[hash][ext][query]' // 指定图片输出到dist/img下
  },
},

最后再确认下目录结构 #

确保你的源文件都放在src目录下，结构大概是这样：

项目根目录
├── src/
│   ├── index.html
│   ├── css/
│   │   └── style.css
│   ├── img/
│   │   └── logo.png
│   └── js/
│       ├── index.js
│       └── test.js
├── dist/
├── webpack.config.js
└── package.json

按这些修改后，重新运行npm run start:dev，应该就能正常加载Logo、CSS，也不会再出现变量未定义的错误啦！

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