文件处理 loader

file-loader 文件处理

file-loader: 生成依赖的文件到输出目录，然后将模块文件设置为：导出一个路径

处理那些不是 js 和 css 的文件，例如图片,字体。

一般我们由 js 生成的静态文件会放在 assets 目录下面的。

安装

pnpm i file-loader -D

先看 src/index.js 入口文件

const imgPath = require("./assets/img/webpack.png"); //webpack依旧会解析，然后进行AST抽象语法树分析，但是由于是一个图片，webpack解析到乱码就会报错，所以我们需要一个loader来将图片转换为webpack认识的js代码。
console.log(imgPath);

if (Math.random() < 0.8) {
  const img = document.createElement("img");
  img.src = imgPath;
  document.body.appendChild(img);
}

配置 file-loader

webpack.config.js

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

module.exports = {
  mode: "development",
  devtool: "source-map",
  devServer: {
    open: true,
    port: 8000,
    proxy: {
      //代理规则
      "/api": {
        target: "http://open.duyiedu.com",
        changeOrigin: true,
        pathRewrite: { "^/api": "" },
      },
    },
  },
  entry: {
    index: "./src/index.js",
  },
  output: {
    filename: "[name]-[chunkhash:5].js",
  },
  //使用file-loader
  module: {
    rules: [
      {
        test: /\.(png)|(jpg)|(gif)$/,
        // use: ["file-loader"], //require("file-loader")
        use: [
          {
            loader: "file-loader",
            options: {
              name: "/imgs/[name]-[hash:5].[ext]", //注意,这里的hash是文件的hash，由loader处理的，而不是webpack.webpack只负责解析loader生成之后的js,并不知道这个loader具体干了什么。
            },
          },
        ],
      },
    ],
  },
  //
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({ template: "./src/public/index.html" }),
    new CopyPlugin([{ from: "./src/public", to: "./" }]),
  ],
};

file-loader 原理分析

//file-loader
function loader(source) {
  // source：文件内容（图片内容 buffer）
  // 1. 生成一个具有相同文件内容的文件到输出目录,详见练习-处理图片文件
  // 2. 返回一段代码   export default "文件名"
}

url-loader 图片处理

url-loader：将依赖的文件转换为：导出一个 base64 格式的字符串||用于将文件转换为 base64 URI

使用场景:当页面上有小图片的时候，如果是生成文件的话，那么在最开始页面加载的时候，就需要创建很多 http 请求，这样就得不偿失了。所以，一般当图片比较小的时候，我们使用 base64 嵌入到代码。这样可以把握一个度。

安装

pnpm i url-loader -D

使用

webpack.config.js

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

module.exports = {
  mode: "development",
  devtool: "source-map",
  devServer: {
    open: true,
    port: 8000,
    proxy: {
      //代理规则
      "/api": {
        target: "http://open.duyiedu.com",
        changeOrigin: true,
        pathRewrite: { "^/api": "" },
      },
    },
  },
  entry: {
    index: "./src/index.js",
  },
  output: {
    filename: "[name]-[chunkhash:5].js",
  },
  //使用file-loader
  module: {
    rules: [
      //++++++url-loader
      {
        test: /\.(png)|(jpg)|(gif)$/,
        use: [
          {
            //url-loader内置了file-loader,当大于limit的时候，就直接交给file-loader去处理
            loader: "url-loader",
            options: {
              limit: 100 * 1024, //文件小于100*1024返回base64,
              name: "/imgs/[name]-[hash:5].[ext]", //可以写file-loader的配置,url-loader处理不了的时候就会带配置一同交给file-loader处理
            },
          },
        ],
      },
    ],
  },
  //
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({ template: "./src/public/index.html" }),
    new CopyPlugin([{ from: "./src/public", to: "./" }]),
  ],
};

url-loader 原理

//file-loader
function loader(source) {
  // source：文件内容（图片内容 buffer）
  // 1. 根据buffer生成一个base64编码,详见练习-处理图片
  // 2. 返回一段代码   export default "base64编码"
}