【Webpack--007】处理其他资源--视频音频

🤓😍Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-前端领域博主

🐱‍🐉若此文你认为写的不错,不要吝啬你的赞扬,求收藏,求评论,求一个大大的赞!👍*

🐞🐞文章若有错误或某个内容有更优的解决方案,还望指正!👍*
更多webpack入门知识,详细解读webpack的基本使用、进阶优化等;请阅读专栏: sam9029--CSDN博客---Webpack入门笔记
或者访问 作者个人博客网站sam9029.asia---Webpack入门笔记


处理其他资源--视频/音频

开发中可能还存在一些其他资源,如音视频等,(但是很少见,可能一般会走CDN,官网的话可能就会自行处理)

就是在处理字体图标资源基础上增加其他文件类型,统一处理即可

js 复制代码
{
    // 和其他资源 y
    test: /\.(mp4|mp3|avi)$/,
    type: "asset/resource",
    generator: {
        filename: "static/media/[hash:8][ext][query]",
	},
},

webpack配置

js 复制代码
// webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
        // 处理图片资源
      {
        // 和其他资源 
        test: /\.(mp4|mp3|avi)$/,
        type: "asset/resource",
        generator: {
            filename: "static/media/[hash:8][ext][query]",
        },
      },
    ],
  },
  plugins: [],
  mode: "development",
};
  • mainjs
js 复制代码
import { intt, intt2 } from "./js/index";
// 引入 font字体资源,Webpack才会对其打包
import "./font/iconfont.css";
// 引入 Css 资源,Webpack才会对其打包
import "./style/index.css";
import "./style/less.less";
import "./style/sass.scss";
import bearEatFish from "./assets/bearEatFish.mp4";

// // dev-log >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
console.log(`[Dev_Log][${"entry: main_js"}_]_>>>`);
intt(1, 2);
intt2([1, 2]);

// 加载视频
const videoEl = document.createElement("video");
videoEl.src = bearEatFish;
videoEl.style.width = '320px';
videoEl.style.height = '160px';
videoEl.controls = true;

document.body.append(videoEl)
相关推荐
珍宝商店2 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown2 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
月疯3 小时前
OPENCV摄像头读取视频
人工智能·opencv·音视频
小驰行动派3 小时前
B帧 对 视频清晰度 / 码率的影响
音视频
王哥儿聊AI3 小时前
Lynx:新一代个性化视频生成模型,单图即可生成视频,重新定义身份一致性与视觉质量
人工智能·算法·安全·机器学习·音视频·软件工程
gnip3 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿4 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.5 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰5 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息5 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js