【Webpack--007】处理其他资源--视频音频
🤓😍Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-前端领域博主
🐱🐉若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍*
🐞🐞文章若有错误或某个内容有更优的解决方案，还望指正！👍*
更多webpack入门知识，详细解读webpack的基本使用、进阶优化等；请阅读专栏：sam9029–CSDN博客—Webpack入门笔记
或者访问 作者个人博客网站：sam9029.asia—Webpack入门笔记
处理其他资源–视频/音频
开发中可能还存在一些其他资源，如音视频等，（但是很少见，可能一般会走CDN，官网的话可能就会自行处理）
就是在处理字体图标资源基础上增加其他文件类型，统一处理即可
{// 和其他资源 ytest: /\.(mp4|mp3|avi)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},
},
webpack配置
// webpack.config.jsconst 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
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)