webpack5打包样式文件、html、jsx中的图片

一、打包样式文件中的背景图片

1. 下载并配置url-loader并引入图片
2. 具体webpack配置：

   {
       test:/.(jpg|png|gif|svg)$/,
       loader:'url-loader',
       options:{
           limit:8*1024,
           name:'[hash:10].[ext]',
           outputPath:'images'
       }
   }

   图片引入：

   #elementId{
       background:url('./images/1.jpg');
      }

    

二、打包html文件中的图片

1. 下载并配置html-loader同时关闭esModule并引入图片
2. 具体webpack配置：

   {
       test:/.html$/,
       loader:'html-loader',
       options:{
           esModule:false
       }
   }

   图片引入：

   <img src='./images/1.jpg' alt='1.jpg'/>

    

3. 必须设置 esModule：false，否则图片无法正常显示

三、打包jsx文件中的图片

1. 也是使用url-loader,但要关闭 esModule,引入图片时要使用require
2. 具体webpack配置:

   {
       test:/.(jpg|png|gif|svg)$/,
       loader:'url-loader',
       options:{
           limit:8*1024,
           name:'[hash:10].[ext]',
           outputPath:'images',
           esModule:false
       }
   }

   图片引入:

   <img src={require('./images/1.jpg')} alt='1.jpg'/>

    

3. 必须使用 require引入图片,否则图片不会被打包,无法正常显示

4. 必须配置 esModule:false ，否则会报错  [object%20Module]