在js中不仅可以通过import引入js文件,还可以引入图片、视频等资源文件,这样webpack打包时就会把所引入的资源文件也一起打包进来
打包进来的文件会返回一个字符串:即文件的路径
要做到这一点,需要一个工具,file-loader,使用方法很简单那
1. 安装
npm install file-loader --save-dev
2. 配置
{ test: /\.(png|jpg|jpeg|gif)$/, use: [ { loader: ‘file-loader‘, options: { //配置公共资源路径 publicPath: ‘./‘, //配置输出路径 outputPath: ‘images/‘ } } ] },
配置其中的 publicPath 与 output 配置中的 publicPath 作用一直,如果两者都设置了,那么以 output 下的 publicPath 为准,上面配置最终文件输出位置为 /images/[hash].png
为了优化小图片的加载,可以使用url-loader将小于一定尺寸的图片转成base64
注意:url-loader是依赖于file-loader的,所以这两个包都必须安装
{ test: /\.(png|jpg|jpeg|gif)$/, use: [ { loader: ‘url-loader‘, options: { //小于这个尺寸的文件会转成base64,大于的会自动调用file-loader limit: 8192 } } ] },
原文地址:https://www.cnblogs.com/xiaoliwang/p/10687129.html
时间: 2024-11-05 18:27:34