我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

苏南大叔：webpack4系列教程，如何处理html中的视频文件地址？ - webpack-video
webpack4系列教程，如何处理html中的视频文件地址？（图5-1）

本文测试环境：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
Plain text

接下来的操作，非常简单，在安装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
                }
            },
        ]
        //...
    },
}
JavaScript
需要额外注意的是：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>
HTML

得到的编译结果如下：

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

苏南大叔：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/
Plain text

苏南大叔，觉得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