【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)
相关推荐
熊的猫34 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
EasyCVR1 小时前
萤石设备视频接入平台EasyCVR多品牌摄像机视频平台海康ehome平台(ISUP)接入EasyCVR不在线如何排查?
运维·服务器·网络·人工智能·ffmpeg·音视频
runing_an_min1 小时前
ffmpeg 视频滤镜:屏蔽边框杂色- fillborders
ffmpeg·音视频·fillborders
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人2 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人2 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香3 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel