10 webpack file-loader 和 url-loader

文章目录

• 文章参考
• file-loader
• 应用场景
• 安装
• 案例 —— 引入字体库的配置
• url-loader
• 安装
• 案例——图片打包
• file-loader 与 url-loader 的区别？
• file-loader
• url-loader
• 相同点
• 关系
• webpack打包html里面img后src为“[object Module]”问题?

文章参考

1. url-loader github

file-loader

1. 官方解释：
   Instructs webpack to emit the required object as file and to return its public URL
2. 个人理解：
   就是把文件当做一个模块引入，返回这个文件的URL路径

应用场景

1. png、jpg、svg 图片、体资源随机生成一个hash值，当做图片的名字
2. 打包，返回打包之后的文件（包含hash值）路径

安装

npm install --save-dev file-loader

案例 —— 引入字体库的配置

1. file-loader 的配置一定需要设置 esModule: false，否则引入的资源是 [object Module]
2. 可以指定 outputPath 指定图片打包的位置，
3. publicPath 指定的是 字体的路径

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  
  module: {
    rules: [
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        use: {
          loader: "file-loader",
          options: {
            esModule: false, // 这里设置为false
            outputPath: "fonts/", // 指定图片输入的文件夹，打包地址是 “/dist/fonts/字体文件”
            publicPath: "/fonts", // 指定字体的路径，即打包结果引入的地址是 "/fonts/字体文件名"
          }
        }
      },
      {
        test: /\.(scss|css)$/,
        /**
         * loader 是从又向做执行
         * 1. 最先执行 sass-loader ，将 sass 文件转为css
         * 2. css-loader 将转换后的css文件转为 js模块
         * 3. style-loader 将 css 插入到HTML中的<style>标签中
         */
        use: [
          {
            loader: "style-loader" // 将 JS 字符串生成为 style 节点
          },
          {
            loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
          },
          {
            loader: "sass-loader" // 将 Sass 编译成 CSS
          }
        ]
        // 等价于
        // use: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  }
};

http://10.192.202.8:9000/fonts/0bce114e7fb6d91c66a3ddc5ae561ffc.ttf 图片打包后的地址

url-loader

url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以将文件转为base64

安装

npm install --save-dev url-loader

案例——图片打包

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              esModule: false, // 这里设置为false
              outputPath: "images/", // 指定图片输入的文件夹， 打包地址是 “/dist/images/图片名字”
              publicPath: "/images", // 指定获取图片的路径，即打包结果引入的地址是 "/images/图片名字"
              // limit  (如果小于 8K ，则转为base64，否则返回一个url地址)
              limit: 8192,
              name: "[name].[hash:8].[ext]" // 输入的图片名
            }
          }
        ]
      }
    ]
  }  
};

http://10.192.202.8:9000/images/testimage.2369a289.png 图片打包后的地址

file-loader 与 url-loader 的区别？

file-loader

file-loader 返回的是图片的url

url-loader

url-loader可以通过limit属性对图片分情况处理，当图片小于limit（单位：byte）大小时转base64，大于limit时调用file-loader对图片进行处理。

相同点

都是在webpack中处理图片、字体图标等文件。

关系

url-loader封装了file-loader，但url-loader并不依赖于file-loader。

webpack打包html里面img后src为“[object Module]”问题?

参考 webpack打包html里面img后src为“[object Module]”问题

1. 如果使用"file-loader": “^4.2.0"或者"file-loader”: "^2.0.0"却可以正常打包
2. 后来发现file-loader在新版本中 esModule默认为true，因此手动设置为false

module: {
  rules: [
    {
      test: /\.(png|jpg|gif)$/,
      use: [
        {
          loader: "url-loader",
          options: {
			// 默认情况下，文件加载器生成使用ES模块语法的JS模块
            esModule: false, // 这里设置为false
            outputPath: "images/", // 指定图片输入的文件夹
            publicPath: "/images", // 指定获取图片的路径
            // limit  (如果小于 8K ，则转为base64，否则返回一个url地址)
            limit: 8192,
            name: "[name].[hash:8].[ext]" // 输入的图片名
          }
        }
      ]
    }
  ];
}

.webpackStudy .huangbiao {
    background-image: url(/images/testimage.2369a289.png);
    color: red;
}

来源：CSDN

作者：胖鹅68

链接：https://blog.csdn.net/hbiao68/article/details/104063508