webpack4系列教程，如何处理html中的视频文件地址？

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

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

本文测试环境：win10、node@14.2.0、npm@6.14.4、webpack@4.43.0、url-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]。

这里配置视频和配置图片，几乎是一模一样的。图片里面展示了图片的一个配置格式，换成这种格式也是可以的。唯一区别就是要把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>

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

• https://newsn.net/say/webpack-html-loader-ok.html

视频的limit参数

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

• https://newsn.net/say/webpack-url-loader.html

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

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吧。大家有好的见解么？欢迎留言给我。谢谢。

相关链接

• https://newsn.net/say/webpack-html-withimg-loader.html
• https://github.com/webpack-contrib/html-loader/issues/195
• https://github.com/webpack-contrib/html-loader/issues/138
• https://newsn.net/say/webpack-html-loader.html
• https://newsn.net/say/webpack-plugin-html.html

总结

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

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

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

• https://newsn.net/tag/webpack/

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