(如转载,请注明出处)
接下来我们看如何使我们的项目文件(template和css)中支持图片:
1. 我们需要安装两个依赖,file-loader和image-webpack-loader
npm i -D file-loader
在webpack.config.js中配置
其中test为支持的图片格式, file-loader为插件依赖, name=images/[name].[ext]是文件输出路径及文件名称.
这时我们就可以在css中给boy添加个图片背景之类的操作了.
由于我们采用了ejs模板, 在html中添加图片要遵照ejs语法,像这样:
我们可以任意配置输出路径,以及对输出图片文件名进行编码,可以这样配置:
'file-loader?name=[hash:12].[ext]&outputPath=images/&publicPath=images/'
其中hash:12为将文件名编码为长度12, &outputPath=images/&publicPath=images/为输出路径.
2. 接下来我们安装image-webpack-loader对图片文件进行优化(即压缩图片):
npm i -D image-webpack-loader
接下来我们在webpack.config.js中进行配置:
我们也可以对image-webpack-loaderf进行自定义配置:
{
test: /\jpe?g|.png|gif|svg$/i,
use: [
'file-loader?name=images/[name].[ext]',
//you can use it like below.
// 'file-loader?name=[hash:12].[ext]&outputPath=images/&publicPath=images/',
// 'image-webpack-loader'
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
},
]
}
image-webpack-loader更多配置参见github中官方介绍.
