【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 分钟前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•1 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
安静读书3 小时前
Python解析视频FPS(帧率)、分辨率信息
python·opencv·音视频
佑华硬盘拷贝机3 小时前
音频档案批量拷贝:专业SD拷贝机解决方案
音视频
EasyNVR3 小时前
NVR管理平台EasyNVR多个NVR同时管理:全方位安防监控视频融合云平台方案
安全·音视频·监控·视频监控
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic5 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端