1.webpack打包其他资源
webpack打包图片
处理jpg\png等格式的图片对应的loader是:file-loader
下载file-loader
npm install file-loader -D
设置图片打包后的路径和名称:
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
use : {
loader : "file-loader" ,
options : {
// outputPath : "img",
name : "img/[name]_[hash:6].[ext]"
}
}
}
url-loader
可以将较小的文件(图片)转换成base64的URI,减少浏览器向服务器请求的次数.
安装url-loader:npm install url-loader -D
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
use : {
loader : "url-loader" ,
options : {
// outputPath : "img",
name : "img/[name]_[hash:6].[ext]",
// 图片大小小于100kb打包
limit : 100 * 1024
}
}
}
url-loader可以替换file-loader.
2.认识asset modular type
webpack5之前加载资源需要用到一些loader;webpack5