[JavaScript知识库]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等)，这些也可能要降级

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