webpack处理ttf,woff2,mp3,mp4,avi后缀的资源

于 2024-03-08 07:53:30 发布
阅读量371 收藏 9
点赞数 11
文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pzpcxy520/article/details/136551222
版权

{

test:/\.(ttf|woff2?|mp3|mp4|avi)$/,

type:"asset/resource",

generator:{

filename:"static/media/[hash:10][ext][query]"

}

}

pzpcxy520
关注
  • 11
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
webpack5-基础入门-03-修改打包资源路径 处理 图片 字体资源
weixin_40746230的博客
06-07 1237
修改打包资源路径 处理 图片 字体资源
webpack 打包全流程
harvestUachieve的博客
08-20 4220
只有在脚本使用时才会调用。ES6渐渐取代CommonJs。
vue webpck打包mp3
舜岳的博客
06-17 969
安装file-loader打包文件插件 npm i file-loader --save-dev webpack.config.js module:{ rules:[ { test: /\.(mp3|wav|wma|ape|aac)$/i, use:['file-loader'] } ] } .vue内引入mp3 <audio ref="audioPlayer" class="mx-auto mb-3"></audio> //引入 im
Vue2.0+webpack 引入字体文件（eot，ttf，woff）
最新发布
m0_52775179的博客
08-21 1091
如果 Vue2.0+webpack3.6引入字体文件（eot，ttf，woff）路径报错。将font.css 路径修改为。
webpack未能加载打包音频文件
kevin 的博客
07-25 2612
一、说明 在 webpack 中，我们发现，在项目中直接把图片(包括音频)路径拿过来使用是行不通的，要在 require 或者 import 引入之后才能使用这些资源。这是因为 webpack 会把图片当作模块来使用，而不是直接以字符串的形式(模块化是 node 编程的核心理念之一) 二、引入方式 require: 是 AMD 规范引入方式 因为是在运行时调用，所以理论上可以放在代码的任何地方...
webpack 处理CSS资源的实现
10-16
主要介绍了webpack 处理CSS资源的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Webpack常见静态资源处理-模块加载器（Loaders）+ExtractTextPlugin插件
08-30
Webpack 静态资源处理 - 模块加载器（Loaders）+ExtractTextPlugin 插件 Webpack 中的静态资源处理是一个非常重要的 topic，今天我们来介绍 Webpack 中的静态资源处理 - 模块加载器（Loaders）+ExtractTextPlugin ...
详解vue-cli与webpack结合如何处理静态资源
08-29
在使用Vue CLI创建的项目中，处理静态资源是至关重要的一步，这涉及到Webpack的配置和资源的引用规则。本文将深入探讨这两个工具如何协同处理静态资源。 首先，我们有两个主要的静态资源目录：`src/assets` 和 `...
vue-cli与webpack处理静态资源的方法及webpack打包的坑
08-27
然而，处理静态资源是Web开发中常见的挑战，Vue-cli与Webpack也不例外。本文将深入探讨这两者如何处理静态资源，以及在打包过程中可能遇到的问题。 首先，了解Vue-cli中处理静态资源的基本方法。在Vue项目中，我们...
vue框架中添加音频文件
qq_39311328的博客
11-07 913
参考学习地址 需要给项目配置mp3格式的解析器 1、在webpack.base.conf.js中添加加载器。代码如下： { test: /\.(mp3)(\?.*)?$/, loader: 'url-loader', options: { name: utils.assetsPath('assets/[name].[hash:7].[ext]')...
Webpack项目模板配置浅析
zYongheng的博客
10-02 172
目录 webpack基本配置 相关loader研究 相关plugin研究 webpack-cli打包配置 webpack基本配置 打包最简单的CSS文件 const path = require('path'); ​ module.exports = { entry: './entry.js', output: { path: pat...
webpack打包配置
热心市民hzs的博客
07-07 726
在网页中会引用那些常见的静态资源？ js .js .jsx .coffee .ts(Typescript 类 C#语言) css .css .less .sass .scss images .jpg .png .fig .bmp .svg 媒体 .mp3 .mp4 .ogg .avi .wmv 字体文件 .ttf .eot .woff .woff2 .svg 模板文件 .ejs .jade .vue[这是我们在webpack中定义组件的方式，强烈推荐]
webpack配置
qq_41576386的博客
09-14 273
webpack配置 文章将会介绍我对webpack的一些基本配置，用来记录我的配置，防止我忘了，毕竟webpack配置那么多。有面向开发模式的配置，也有面向生产模式的配置。我也是开始学习这些东西，所以目前所有的配置都会是基础配置。之后我也会将我知道的好用的配置写在上面，所以此博客会越来越多。 webpack开发模式配置（自己单独做项目已经够了） 1、环境要求配置： node.js webpack官网建议最新稳定版本 2、起步安装： （注：使用npm安装和cnpm安装是不一样的，会出现一系列报错，所以要
webpack处理媒体文件(图片/视频和音频)
weixin_30824277的博客
02-08 1370
webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的, 这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。 另外，如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通...
webpack 优化打包资源
lucky___star的博客
03-01 287
1. 概述 打包性能的优化包括打包速度的优化和打包后静态资源的优化，总体原则在于尽可能的减少或延迟模块的引用，主要包含以下三个特点 减小打包的整体体积 Code Splitting：按需加载，优化页面首次加载体积，根据路由按需加载，根据是否可见按需加载 Bundle Splitting：分包，根据模块改动频率分层次打包，充分利用缓存 2. 代码压缩 代码压缩可以非常可观地减小资源打包体积，但是...
在html中加入视频文件,webpack4系列教程，如何处理html中的视频文件地址？
weixin_35682009的博客
05-30 732
本博客不欢迎：各种镜像采集行为，请尊重知识产权法律法规。大家都是程序员，不要闹得不开心。webpack如何处理页面上常见的媒体文件呢？比如：mp3、mp4、avi等。本文中，以mp4文件为例，说明这个问题。利用的还是url-loader。所以，请查看文末有关url-loader的相关文章。webpack4系列教程，如何处理html中的视频文件地址？(图5-1)本文测试环境：win10、node@...
Webpack 视频教程
weixin_30379911的博客
12-10 574
https://www.bilibili.com/video/av13378646/?p=4 Webpack 视频教程 转载于:https://www.cnblogs.com/cs122/p/10096580.html
react-webpack2-完整案例
mjzhang1993的博客
03-21 3882
react-webpack 2 - 完整配置案例 源码 webpack 开发跨域问题解决 react16 + react-router4 + webpack开发环境搭建 1.先定义一些配置常量 /webpack/config.js // 引入 node.js path 模块 const path = require('path'); //
webpack 多页面模版
rth362147773的博客
05-01 7235
前言webpack是一款模块加载器兼打包工具，能把js,css,页面，图片，视频等各种资源，进行模块化处理。而现在网上流传很多单页面的webpack模型，那多页面呢？比较少，现在我提供一个多页面的前端模型。希望大家适合使用。功能介绍这模型是多页面模块打包，模型是用html，你们可以换成自己的jsp,php按你自己的需要来。 通过运行服务，把文件直接打包到dist目录下，dist是编译后的文件，服务
webpack svg to woff
05-17
要将 SVG 转换为 WOFF，您需要使用一个名为 `svg2woff` 的工具。以下是使用 webpack 配置的步骤： 1. 安装 `svg2woff` ``` npm install svg2woff --save-dev ``` 2. 在 webpack 配置中添加以下代码： ```javascript const svg2woff = require('svg2woff'); module.exports = { // ... module: { rules: [ { test: /\.svg$/, use: [ { loader: 'file-loader', options: { // 指定输出的文件名和路径 name: '[name].[ext]', outputPath: 'fonts/' }, }, { loader: 'webpack-svg-woff-loader', options: { // 根据需要设置字体的名称和样式 fontName: 'myFont', fontStyle: 'normal' }, }, ], }, ], }, // ... plugins: [ // 添加插件，将 SVG 转换为 WOFF new webpack.LoaderOptionsPlugin({ options: { svg2woff: { // 设置 WOFF 格式的字体文件名，必须与 file-loader 中的名称匹配 fileName: '[name].woff', // 设置字体格式 format: 'woff' }, }, // 注册自定义插件 postTransform: function (webpackConfig) { webpackConfig.module.rules.forEach(function (rule) { if (rule.loader === 'webpack-svg-woff-loader') { rule.options.svg2woff = webpackConfig.options.svg2woff; } }); return webpackConfig; }, }), ], }; ``` 上述代码中，我们使用了两个 loader： - `file-loader` 用于将 SVG 文件复制到指定的目录中，并返回 URL。 - `webpack-svg-woff-loader` 用于将 SVG 文件转换为 WOFF 字体。它依赖于 `svg2woff` 工具，它将字体文件写入到输出目录中。 我们还需要将 `svg2woff` 的选项传递给 `webpack-svg-woff-loader`，以便它知道如何将字体转换为 WOFF 格式。 3. 运行 webpack 运行 `webpack` 命令时，它将使用上述配置来编译您的代码，并将 SVG 文件转换为 WOFF 格式的字体文件。生成的文件将保存在输出目录中（在本例中为 `fonts` 目录）。 希望这可以帮助您将 SVG 转换为 WOFF，并在 webpack 中使用它们。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

pzpcxy520

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值