6. 图片文件处理
npm install file-loader html-loader --save-dev
其中html-loader生效需配合 html-webpack-plugin (分离html插件)才能生效
module.exports={
//...code
module:{
rules:[
{ //处理样式表中引入的图片
test: /\.(png|jpg|gif|jpeg)$/,
loader: 'file-loader',
options: {
name: '[hash].[ext]',
outputPath: './img',
esModule: false
}
},
{
//处理html内联的图片
test: /\.(html)$/,
loader: 'html-loader',
options: {
attrs: ['img:src', 'img:data-src']
}
}
]
}
}
index.css
#bgImg {
width: 10em;
height: 10em;
background: url("./../imgs/favicon.png");
}
index.js
import "./xxx/css/index.css"
Last modified 3yr ago