HTML中使用<img>
标签
![](../../image/alarmLevel/cleared_round_5ecc49.png)
JS中使用require加载图片模块
const imgUrl = require('../../image/theme/light/nav/alarm.svg');
注意:路径一定要是相对路径
image-webpack-loader对比较大的图片进行压缩
依赖 url-loader、img-loader安装
cnpm install img-loader --save-dev
cnpm install --save-dev url-loader
安装image-webpack-loader
cnpm install image-webpack-loader --save-dev
webpack.config.js:
{
test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 10000 , /* 图片大小小于1000字节限制时会自动转成 base64 码引用*/
name: '[path][name].[ext]?[hash:6]!./dir/file.png'
}
},
/*对图片进行压缩*/
{
loader: 'image-webpack-loader',
query: {
progressive: true,
optimizationLevel: 7,
interlaced: false,
pngquant: {
quality: '65-90',
speed: 4
}
}
}
// {
// loader:'url-loader?limit=5000&name=[path][name].[ext]?[hash:6]!./dir/file.png'
// }
]
}
效果: