webpack不显示css图片的坑

真的是踩了一晚上的坑啊，好几次差点放弃，还好最后都解决了

首先我之前用的webpack5，一堆坑，然后降版到和老师一样的4.41.6版本

然后还是各种各样的报错，因为之前都是直接安装的loader，很多版本都太高了，一个个的降版，最后突然就成功了，下面看一下我的配置：

{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.6.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^4.4.1",
    "less": "^3.9.0",
    "less-loader": "^3.0.0",
    "style-loader": "^1.3.0",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  }
}

module:{
    rules:[
      {
        test:/\.less$/,
        use:[
          'style-loader','css-loader','less-loader'
        ]
      },
      {
        // 处理图片资源
        test:/\.(jpg|png|gif)$/,
        // type: 'javascript/auto',
        // type:'asset/resource',
        // 使用一个loader
        // 需要下载url-loader  file-loader
        loader:'url-loader',
        options:{
          // 图片大小小于8kb，就会被base64处理
          // 优点：减少请求数量（减轻服务器压力）
          // 确定：图片体积会更大（文件请求速度变慢）
          limit:8*1024,
          // esModule:false
        }
      }
    ]
  },