一、打包样式文件中的背景图片
- 下载并配置url-loader并引入图片
- 具体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文件中的图片
- 下载并配置html-loader同时关闭esModule并引入图片
- 具体webpack配置:
{ test:/.html$/, loader:'html-loader', options:{ esModule:false } }
图片引入:
<img src='./images/1.jpg' alt='1.jpg'/>
-
必须设置 esModule:false,否则图片无法正常显示
三、打包jsx文件中的图片
- 也是使用url-loader,但要关闭 esModule,引入图片时要使用require
- 具体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'/>
-
必须使用 require引入图片,否则图片不会被打包,无法正常显示
-
必须配置 esModule:false ,否则会报错 [object%20Module]