【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)
相关推荐
无奈何杨21 分钟前
扣子coze的AI工作流搭建技术,开源项目FlowGram流程搭建引擎
前端
ElasticPDF-新国产PDF编辑器31 分钟前
Angular 项目 PDF 批注插件库在线版 API 示例教程
前端·pdf·angular.js
6武735 分钟前
Vue 数据传递流程图指南
前端·javascript·vue.js
EasyGBS40 分钟前
视频设备轨迹回放平台EasyCVR打造视频智能融合新平台,驱动智慧机场迈向数字新时代
网络·人工智能·安全·音视频
EasyGBS1 小时前
视频设备轨迹回放平台EasyCVR综合智能化,搭建运动场体育赛事直播方案
网络·安全·音视频
jakeswang1 小时前
查询条件与查询数据的ajax拼装
前端·ajax
samuel9181 小时前
axios取消重复请求
前端·javascript·vue.js
三天不学习1 小时前
JiebaAnalyzer 分词模式详解【搜索引擎系列教程】
前端·搜索引擎·jiebaanalyzer
滿2 小时前
Vue 3 中按照某个字段将数组分成多个数组
前端·javascript·vue.js