webpack5處理圖片、圖標(biāo)字體、多媒體等靜態(tài)資源文件

更新時間：2023年12月14日 10:12:36 作者：暴躁程序員

在 webpack5 中內(nèi)置了 file-loader、url-loader、raw-loader, 可以直接通過配置實(shí)現(xiàn)常用功能,下面就來介紹一下webpack5處理圖片、圖標(biāo)字體、多媒體等靜態(tài)資源文件的實(shí)現(xiàn)方法,感興趣的可以了解一下

一、搭建 webpack 基礎(chǔ)環(huán)境

初始化環(huán)境

npm init -y

安裝環(huán)境依賴

npm install webpack cross-env webpack-cli -D

在 package.json 中修改 scripts

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack --config ./webpack.config.js --watch --progress --color ",
  "build": "cross-env NODE_ENV=production webpack --config ./webpack.config.js --progress --color "
},

新建入口文件 src/index.js

consle.log("hello world");

創(chuàng)建 webpack.config.js 配置文件

var path = require("path");

module.exports = {
  entry: {
    app: "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name]-budle.js",
    clean: true,
  },
  mode: process.env.NODE_ENV,
  module: {
    rules: [],
  },
};

打包測試

npm run dev
npm run build

二、webpack5 處理圖片資源

安裝依賴

npm install style-loader css-loader -D

修改 webpack.config.js 配置文件

var path = require("path");

module.exports = {
  entry: {
    app: "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name]-budle.js",
    clean: true,
  },
  mode: process.env.NODE_ENV,
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
          },
        ],
      },
    ],
  },
};

新建 src/assets/css/index.css

#app div:nth-child(1) {
  width: 50px;
  height: 50px;
  background: url("../images/01.png") no-repeat;
  background-size: 100% 100%;
}
#app div:nth-child(2) {
  width: 50px;
  height: 50px;
  background: url("../images/02.png") no-repeat;
  background-size: 100% 100%;
}
#app div:nth-child(3) {
  width: 50px;
  height: 50px;
  background: url("../images/03.png") no-repeat;
  background-size: 100% 100%;
}

新建入口文件 src/index.js

import "./assets/css/index.css";

新建 src/index.html 模板

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../dist/app-budle.js"></script>
  </head>
  <body>
    <div id="app">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

打包編譯

npm run build

在瀏覽器打開 src/index.html，查看結(jié)果

發(fā)現(xiàn)圖片可以正常渲染，在 dist 中可查看到打包后的圖片

配置打包輸出路徑，并配置靜態(tài)資源轉(zhuǎn) base64 的 maxSize，修改 webpack.config.js 配置文件
設(shè)置 type: "asset" ，當(dāng)指定靜態(tài)資源打包路徑時，parser.dataUrlCondition.maxSize: 8 * 1024 會轉(zhuǎn) base64 自動生效，需手動配置范圍

var path = require("path");

module.exports = {
  entry: {
    app: "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name]-budle.js",
    clean: true,
  },
  mode: process.env.NODE_ENV,
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              esModule: false,
            },
          },
          {
            loader: "css-loader",
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 1 * 1024, // 小于1kb轉(zhuǎn)base64，減少請求次數(shù)
          },
        },
        generator: {
          filename: "static/images/[hash:10][ext][query]", // 指定打包路徑和文件名
        },
      },
    ],
  },
};

三、webpack5 處理圖標(biāo)字體資源

修改 webpack.config.js

設(shè)置 asset/resource ，靜態(tài)資源文件打包時不會轉(zhuǎn) base64

var path = require("path");

module.exports = {
  entry: {
    app: "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name]-budle.js",
    clean: true,
  },
  mode: process.env.NODE_ENV,
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              esModule: false,
            },
          },
          {
            loader: "css-loader",
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 1 * 1024, // 小于1kb轉(zhuǎn)base64，減少請求次數(shù)
          },
        },
        generator: {
          filename: "static/images/[hash:10][ext][query]", // 指定打包路徑和文件名
        },
      },
      {
        test: /\.(ttf|woff|woff2?)$/i,
        type: "asset/resource",
        generator: {
          filename: "static/iconfont/[hash:10][ext][query]",
        },
      },
    ],
  },
};

四、webpack5 處理視頻資源

修改 webpack.config.js

設(shè)置asset/resource ，靜態(tài)資源文件打包時不會轉(zhuǎn) base64

var path = require("path");

module.exports = {
  entry: {
    app: "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name]-budle.js",
    clean: true,
  },
  mode: process.env.NODE_ENV,
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              esModule: false,
            },
          },
          {
            loader: "css-loader",
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 1 * 1024, // 小于1kb轉(zhuǎn)base64，減少請求次數(shù)
          },
        },
        generator: {
          filename: "static/images/[hash:10][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff|woff2?)$/i,
        type: "asset/resource",
        generator: {
          filename: "static/iconfont/[hash:10][ext][query]",
        },
      },
      {
        test: /\.(map3|map4|avi)$/i,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:10][ext][query]",
        },
      },
    ],
  },
};

到此這篇關(guān)于webpack5處理圖片、圖標(biāo)字體、多媒體等靜態(tài)資源文件的文章就介紹到這了,更多相關(guān)webpack5處理靜態(tài)資源文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: