webpack 使用file-loader 和 url-loader ，打包后图片不能查看且网页图片路径不正确

目录 

文件结构

解决方法

---

文件结构

我在页面设置了两个div 来展示背景图片，图片由src/css 里面的less 文件引入

 在安装好file-loader 和 url-loader 后如下配置：

 打包后文件结构如下：

 页面：

 页面图片路径取的是dist 下面打包的文件，在webstorm 打开后不能解析：

 打开dist/images 下的图片能够展示：

解决方法

    (1)  查看当前项目package.json 文件，找到devDependencies 下的webpack 版本

 如果是webpack 5 的话可以使用如下配置：

{
  test: /\.(png|jpg|gif)$/,
  type: 'asset',    // 实现判断图片大小转化base64
  parser: {
    dataUrlCondition: { // 判断图片是否转化为base64
      maxSize: 8 * 1024 // 8kb
    }
  },
  generator: {
    filename: 'images/[hash:5][ext][query]'  // 文件输出路径及命名
  } 
}    

打包后文件结构

 

页面：

 

 简单说一下原因：webpack 5 将file-loader 和 url-loader 功能通过资源模块(asset module) 替代了

这里贴个官方链接，想了解的话可以去看看 https://webpack.docschina.org/guides/asset-modules/

（2）webpack 降级为4(没有尝试，如果不能请告知我)

         注意：降级可能会导致部分功能不能实现(loader等)，这些也可能要降级

新手上路，求大佬多多建议！！！