webpack5用url-loader打包后出现图片打不开、资源重复

最新推荐文章于 2021-10-25 17:40:39 发布

Homi97

最新推荐文章于 2021-10-25 17:40:39 发布

阅读量4.8k

点赞数 50

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/w184167377/article/details/118930758

版权

本文档记录了使用webpack 5.45.1时遇到的图片无法正常打开和资源重复问题。当图片大小小于limit时，webpack不应生成图片文件，而应以base64字符串形式存在于CSS中。然而，实际打包后发现图片被错误处理，且在不同limit设置下，问题表现不同。通过查阅文档，了解到webpack 5已弃用url-loader，需要进行相关配置。最终通过在url-loader中设置esModule为false解决了问题。

摘要由CSDN通过智能技术生成

问题描述：

用webpack 5.45.1打包后，图片出现打不开、图片重复的问题。
因为第一次使用webpack，网上也花了不少时间找不到解决方案，自己解决后，在这里记录一下。

测试项目结构：

在这里插入图片描述

webpack.config.js

const path = require('path')

module.exports = {
   
  entry: './src/index.js',
  output: {
   
    path: path.resolve(__dirname,'dist'),
    filename: 'bundle.js'
  },
  mode: 'development',
  module: {
   
    rules: [
      {
   
        test: /\.(png|jpg|gif)$/i,
        u