zoukankan      html  css  js  c++  java
  • 【webpack】中file-loader和url-loader使用方法

    1. file-loader 可以指定要复制和放置资源文件的位置,以及如何使用版本哈希命名以获得更好的缓存。此外,这意味着 你可以就近管理图片文件,可以使用相对路径而不用担心部署时 URL 的问题。使用正确的配置,webpack 将会在打包输出中自动重写文件路径为正确的 URL。

    2. url-loader 允许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值),这会减少小文件的 HTTP 请求数。如果文件大于该阈值,会自动的交给 file-loader 处理。

    参考如下配置

        {
            test: /.(png|svg|jpe?g)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 8192,
                  name: 'images/[name].[hash:7].[ext]',
                  publicPath: './'
                }
              }
            ]
          },
          {
            test: /.(woff|woff2|eot|ttf|otf)$/,
            loader: 'file-loader'
          }
  • 相关阅读:
    day11课堂小结 函数作用域
    猜年龄函数版day10作业
    函数day10课堂小结
    day07作业
    文件处理day09
    编码day08
    默写
    day07课堂小结
    day06作业
    const与define应用上该怎么取舍
  • 原文地址:https://www.cnblogs.com/wuxianqiang/p/10580039.html
Copyright © 2011-2022 走看看