file-loader与url-loader

最新推荐文章于 2024-07-30 18:16:48 发布

暗冥$炎舞

最新推荐文章于 2024-07-30 18:16:48 发布

阅读量797

点赞数

文章标签： webpack javascript

本文链接：https://blog.csdn.net/Xtianbaizhou/article/details/125268707

版权

file-loader与url-loader 用来处理样式中的图片资源（只是样式中的，并不是html中的图片）的

安装 npm i file-loader -D
配置
```
 {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[hash:6].[ext]",
              outputPath: "img", // 这代表将图片输出到img目录
              // limit: 3012,   // url-loader的配置项 当图片资源大小小于所设置的值后，将图片转为Base64
              esModule: false, // 由于file-loader使用的是ES6模块化，css-loader使用的是commonjs模块化，所以需要将file-loader的模块化属性设置为false
            }
          },
        ],
        type: 'javascript/auto'
      },
```
如果没有配置outputPath那么图片资源输出的路径将全部放在bulid目录下，为了将图片资源放在imgs目录，所以需要配置outputPath

技巧：直接在outputPath：‘路径名’ 无论在webpack哪个版本，它都会在bulid目录下新建一个‘路径名’

注：配置publicPath在webpack不同的版本会略有不同

debug：file-loader、url-loader打包url引入的图片生成两个图片，一个无法加载。但是页面引入的却是这个无法加载的图片？

原因是css-loader版本不同。
css-loader 6.0.0以上版本。对引入背景图片的url解析方式不一样，导致生成了两个图片（一个正常由file-loader解析生成，一个仅由css-loader解析引入）

解决方案一：
将css-loader版本由6降到5就行了

解决方案二：
官方推荐使用asset module 资源模块替换loader
```
javascript
asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。
```
解决方案三：
如果你还想使用url-loader 那么你只需要在url-loader中设置type: 'javascript/auto’即可；

原文链接：https://blog.csdn.net/wuyxinu/article/details/122959978
优化以上代码仅仅是做到了将图片资源复制，并没有做到优化（比如每次加载图片资源时少发送一次网络请求）

需求：将大于8K的图片复制，小于8K 的图片转换为base64编码（可以做到少发送一次网络请求）

解：利用url-loader , 是file-loader的加强版