webpack(构建工具)

将Webpack与Video.js一起使用

Video.js和诸如videojs-contrib-hls之类的播放技术都可以在基于Webpack的构建环境中使用。以下是一些特定于Webpack的配置更改,这些更改将使您正常运行。


Video.js CSS:

要添加播放器所需的CSS,只需将其添加 require('!style-loader!css-loader!video.js/dist/video-js.css')到包含或初始化播放器的文件中即可。


在Webpack中处理.eot文件

除此之外,默认情况下,Webpack可能不知道如何加载IE8支持所需的.eot文件。这可以通过安装file-loader和url-loader软件包来解决。通过运行以下命令安装它们:

npm install --save-dev file-loader url-loader
安装两个软件包后,只需在“加载程序”部分的webpack.config文件中添加以下内容:
{
  loader: 'url-loader?limit=100000',
  test: /\.(png|woff|woff2|eot|ttf|svg)$/
}


将Webpack与videojs-contrib-hls一起使用

用以下行导入HLS库:

import * as HLS from 'videojs-contrib-hls';
为了使用该技术,我们还必须为Webworkers引入webworkify-webpack-dropin包,并运行:
npm install --save-dev webworkify-webpack-dropin
要在您的页面中利用此功能,只需在webpack.config.js文件中使用以下方式创建别名:
resolve: {
  alias: {
    webworkify: 'webworkify-webpack-dropin'
  }
}
使用“eval”标签的源映射与webworkify不兼容,因此这可能也需要更改。像“cheap-eval-module-source-map”这样的源映射应该更改为“cheap-source-map”或其他任何不使用“eval”源映射的适合您构建的映射。


上一篇:vue 下一篇:没有了