我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

webpack如何处理页面上常见的媒体文件呢?比如:mp3mp4avi等。本文中,以mp4文件为例,说明这个问题。利用的还是url-loader。所以,请查看文末有关url-loader的相关文章。

苏南大叔:webpack4系列教程,如何处理html中的视频文件地址? - webpack-video
webpack4系列教程,如何处理html中的视频文件地址?(图5-1)

本文测试环境:win10node@14.2.0npm@6.14.4webpack@4.43.0url-loader@4.1.0。本文相对简单,就仅仅需要注意:调用.mp4等视频文件的方式即可。

配置webpack.config.js

本文需要安装url-loader,安装命令如下:

npm i url-loader -D

接下来的操作,非常简单,在安装url-loader的前提下,配置一下文件类型即可:
webpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
//...

module.exports = {
    mode: 'production', // 环境
    entry: {
        //...
        main: './src/main.js'
    },
    output: {
        filename: 'js/[name].[hash:8].bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./html/index.html", // 根据 目标文件生成 html
        }),
        //...
    ],
    module: {
        rules: [
            //...
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: 'url-loader',
                query: {
                    limit: 10000,
                    name: 'video/[name].[ext]',
                    esModule: false
                }
            },
        ]
        //...
    },
}
需要额外注意的是:esModule: false,否则,得到的视频地址,可能是个[object]

苏南大叔:webpack4系列教程,如何处理html中的视频文件地址? - webpack-video-config
webpack4系列教程,如何处理html中的视频文件地址?(图5-2)

这里配置视频和配置图片,几乎是一模一样的。图片里面展示了图片的一个配置格式,换成这种格式也是可以的。唯一区别就是要把limit设置的大一些。

引入媒体文件

这里还是以前面的video标签示意,注意:苏南大叔在这里使用了html-webpack-plugin中的ejs相关功能。例如:

<video poster="<%= require('../src/bg2.png')%>">
   <source src="<%= require('../src/1.mp4')%>"/>
</video>

得到的编译结果如下:

<video poster="img/bg2.20daa.png">
   <source src="video/1.mp4" />
</video>

苏南大叔:webpack4系列教程,如何处理html中的视频文件地址? - webpack-video-require
webpack4系列教程,如何处理html中的视频文件地址?(图5-3)

当然,如果您没有在模版中使用require()语句,而是使用html-loader的话,本文的.mp4处理机制,也是可以生效的。具体的可以参见下面的这个链接:

视频的limit参数

和图片的处理配置一样,这里也有个limit参数。如果小于等于这个数值,就会被内嵌到html页面里面。(想想画面都很美,对吧?)相关链接:

苏南大叔:webpack4系列教程,如何处理html中的视频文件地址? - webpack-video-config-limit
webpack4系列教程,如何处理html中的视频文件地址?(图5-4)

页面上一直会有个警告信息,内容如下:

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  video/1.mp4 (1.45 MiB)

WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

苏南大叔,觉得webpack的善意提醒罢了,提示你不要加载过大的文件。不过,苏南大叔觉得,想让一个视频文件,很小的话,很难吧?暂时忽略这个warnning吧。大家有好的见解么?欢迎留言给我。谢谢。

苏南大叔:webpack4系列教程,如何处理html中的视频文件地址? - webpack-video-config-warning
webpack4系列教程,如何处理html中的视频文件地址?(图5-5)

相关链接

总结

本文相对简单,和webpack处理图片的操作流程,基本上是相似的。 套路就是:

  • 第一,建立文件关联(mp4=>url-loader)。
  • 第二,引入文件(require语句,或者webpack.config.js中使用html-loader自然引入)。
  • 需要注意:配置esModule: false项目。

更多webpack相关博客文字,请点击苏南大叔的链接:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   webpack