脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → webpack5处理静态资源文件

webpack5处理图片、图标字体、多媒体等静态资源文件

 更新时间：2023年12月14日 10:12:36   作者：暴躁程序员  
在 webpack5 中内置了 file-loader、url-loader、raw-loader, 可以直接通过配置实现常用功能,下面就来介绍一下webpack5处理图片、图标字体、多媒体等静态资源文件的实现方法,感兴趣的可以了解一下

在 webpack5 中内置了 file-loader、url-loader、raw-loader, 可以直接通过配置实现常用功能。官网

一、搭建 webpack 基础环境

初始化环境

npm init -y

安装环境依赖

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");

创建 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，查看结果

发现图片可以正常渲染，在 dist 中可查看到打包后的图片

配置打包输出路径，并配置静态资源转 base64 的 maxSize，修改 webpack.config.js 配置文件
设置 type: "asset" ，当指定静态资源打包路径时，parser.dataUrlCondition.maxSize: 8 * 1024 会转 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转base64，减少请求次数
          },
        },
        generator: {
          filename: "static/images/[hash:10][ext][query]", // 指定打包路径和文件名
        },
      },
    ],
  },
};

三、webpack5 处理图标字体资源

修改 webpack.config.js

设置 asset/resource ，静态资源文件打包时不会转 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转base64，减少请求次数
          },
        },
        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

设置asset/resource ，静态资源文件打包时不会转 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转base64，减少请求次数
          },
        },
        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]",
        },
      },
    ],
  },
};

到此这篇关于webpack5处理图片、图标字体、多媒体等静态资源文件的文章就介绍到这了,更多相关webpack5处理静态资源文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript生成UUID的五种方法详解

    JavaScript生成UUID的五种方法详解

    UUID是一种由算法生成的二进制长度为128位的数字标识符，格式为“xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”。本文总结了五个JS生成UUID的方法，感兴趣的可以了解一下
    2022-06-06
  • Bootstrap 树控件使用经验分享(图文解说)

    Bootstrap 树控件使用经验分享(图文解说)

    很多项目中使用树来展示层级关系，还有些树是为了选中项然后其他地方调用选中项。今天脚本之家小编给大家带来了Bootstrap 树控件使用经验分享，需要的朋友参考下吧
    2017-11-11
  • Jquery对数组的操作技巧整理

    Jquery对数组的操作技巧整理

    这篇文章主要介绍了Jquery对数组的操作技巧,需要的朋友可以参考下
    2014-03-03
  • Next.js项目实战踩坑指南(笔记)

    Next.js项目实战踩坑指南(笔记)

    这篇文章主要介绍了Next.js项目实战踩坑指南(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • JS 实现请求调度器

    JS 实现请求调度器

    这篇文章主要介绍了JS 实现请求调度器的方法，帮助大家更好的理解和学习使用js，感兴趣的朋友可以了解下
    2021-03-03
  • ES6中Iterator与for..of..遍历用法分析

    ES6中Iterator与for..of..遍历用法分析

    这篇文章主要介绍了ES6中Iterator与for..of..遍历用法,结合实例形式分析了ES6中Iterator的概念、用法及for..of..遍历的使用技巧,需要的朋友可以参考下
    2017-03-03
  • js多级树形弹出一个小窗口层(非常好用)实例代码

    js多级树形弹出一个小窗口层(非常好用)实例代码

    js多级树形弹出一个小窗口层(非常好用)实例代码，需要的朋友可以参考一下
    2013-03-03
  • 全面解析Bootstrap中scrollspy（滚动监听）的使用方法

    全面解析Bootstrap中scrollspy（滚动监听）的使用方法

    这篇文章主要为大家全面解析Bootstrap中scrollspy（滚动侦听）的使用方法，感兴趣的小伙伴们可以参考一下
    2016-06-06
  • js（jquery）实现无刷新跳转404页面不存在效果

    js（jquery）实现无刷新跳转404页面不存在效果

    有时候我们希望临时让某个分类或者多个文章不能正常访问，手动给html文件改名？或者改后台改程序？太麻烦了。用本文的js代码很容易实现，而且使用得当很隐蔽。这篇文章主要介绍了js（jquery）实现无刷新跳转404页面不存在效果,需要的朋友可以参考下
    2023-04-04
  • webgl实现物体描边效果的方法介绍

    webgl实现物体描边效果的方法介绍

    这篇文章主要给大家介绍了关于webgl实现物体描边效果的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用webgl具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-11-11

最新评论