一般有两种方式:
- file-loader
- url-loader
yarn add file-loader url-loader -D //yarn方式先下载包
npm i file-loader url-loader -D //npm方式
……
module: {
rules: [{
test: /\.(jpg|png|gif)$/, //对以jpg|png|gif图片的后缀进行打包,仅对于 background-image的图片有效
use: {
loader: "url-loader", //file-loader
options: {
name: "[name]_[hash].[ext]",
outputPath: "images/",
limit: 2048 //url-loader的属性
}
}
}]
}
当loader属性为file-loader时,webpack会把这个打包成一个以options的name属性值为图片名称的图片,并放在images文件夹下;无论这个图片的尺寸。
如: test.png => test_ksjdfkasdfasdf234dsasdfkdnsa.png
当当loader属性为url-loader时;并且有limit属性时;
若图片超过2kb(2048)时,则图片以base64的形式进行展示,若没有则以file-loader的方式进行打包处理
注意base64 若对大图片进行处理,base64会非常的长,反而不利于优化。
注意:url-loader 依赖于file-loader,
仅列举了options常用的属性,若有其他需求请参考npm url-loader。
若有img标签src路径形式的图片,请参考以下两个插件,哪个都不错。
-
html-withimg-loader
-
copy-webpack-plugin