一、处理html文件中的图片
1.安装loader:
npm install --save-dev html-withing-loader@0.1.16
2.配置loader:
{test:/\.(htm|html)$/,
loader:'html-withing-loader'}
3.安装file-loader:
npm install --save-dev file-loader@6.0.0
该loader主要是处理html文件的图片,需要结合file-loader来处理,添加配置项,处理打包后的html文件中引入图片的路径。
4.配置file-loader:
{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'file-loader',
options: {
name: 'img/[name].[ext]',
esModule: false //添加该配置,处理打包后html文件引入图片的路径
}
}
},
二、处理css文件中的图片
1.file-loader
1.先安装css-loader和mini-css-extract-plugin
npm install --save-dev css-loader@4.1.1
npm install --save-dev mini-css-extract-plugin&#