图片打包关键要用到file-loader或url-loader,其中url-loader与file-loader功能基本一致,只不过url-loader能将小于某个大小的图片进行base64格式的转化处理。
安装
npm install --save-dev url-loader
module:{
rules:[
{
test:/\.(png|gif|bmp|jpg)$/,
use:'url-loader?limit=5000&name=image/[hash:8]-[name].[ext]'
}
]
}
{
//将图片打包到发布环境中的images目录下
test: /\.(jpg|jpeg|gif|png|svg)$/,
use: {
loader: 'url-loader',
options: {
limit: 1024 * 1,
name: 'images/[hash:8].[ext]',
publicPath: '../'
}
}
注意:limiet的意思是:图片大小小于limit时,使用base64转码。大于limit时,正常打包。
name:通过name属性改变图片的打包目录和文件名。
hash:图片经过处理后,会在输出文件夹中生成图片,此时图片的名字为hash。ext代表图片的格式。
publicPath:
为你的文件配置自定义 public
发布目录
outputPath:
为你的文件配置自定义 output
输出目录
注意:webpack 在打包时,首先会把图片复制到 /dist/images/ 文件夹下,然后把 css 文件中的 url 路径替换为 webpack 中 options 的 name 属性指向的路径,即 /images/logo.jpg, 但是这个路径是相对路径,是相对于 /dist/css/~.css 来说的, 所以此处引用的 文件地址为: /dist/css/images/logo.jpg。 但是我们打包后的 css 文件夹中, 并没有 images/logo.png, 所以图片并没有渲染出来。