SkeyeWebPlayer.js H5播放器开发之webpack项目创建级编译配置（一）

SkeyeWebPlayer.js H5播放器开发之播放器动态渲染video。动态渲染是采用js进行创建dom、添加dom、添加class、style等方式操作dom元素。最终将播放器编译成成一个独立的文件，在页面中引入js文件使用，本项目采用webstorm编辑器、webpack编译工具来开发以及发布。

1.首先创建一个webpack项目。

新建一个文件夹，如：webPalyer 。
再 cmd 到该目录下执行：npm init （首先要用node环境,以及npm）一直回车，输入相关信息。
完了之后，会发现此时文件夹多了一个 package.json文件【完整配置在最下方】。
执行 npm install （如果网速过慢安装淘宝镜像后执行cnpm install也可以），执行完之后项目会多出来一个node_module文件夹。
创建 src 文件夹里面放置我们的主要文件。
创建 webpack.config.js 文件【完整配置在最下方】。

2.在package.json文件中的script中添加

"dev": "webpack --mode development --progress",
"build": "webpack --mode production --progress"

3.执行 npm run dev，执行后会在dist目录下生成SkeyeWebPlayer.js文件，就说明准备工作已经做好了。

npm run dev

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body></body><script src="../dist/SkeyeWebPlayer.js"></script><script>new SkeyeWebPlayer()</script>
</html>

4.扩展

（1）配置本地服务器（官网地址 https://www.npmjs.com/package/webpack-dev-server）。

（2）添加处理css/scss文件类型（安装指定版本，高版本会报错）。

npm i -D sass-loader@7.0.1 node-sass@4.14.1

5.package.json相关的依赖包

{"name": "webplayer","version": "2.0.0","description": "","main": "index.js","scripts": {"dev": "webpack --mode development --progress","build": "webpack --mode production --progress"},"keywords": ["html5","flv","mse","javascript"],"author": "","license": "ISC","devDependencies": {"@babel/core": "^7.8.4","@babel/plugin-transform-runtime": "^7.8.3","@babel/preset-env": "^7.8.4","@babel/runtime": "^7.8.4","@videojs/generator-helpers": "~1.2.0","@videojs/vhs-utils": "^1.1.0","babel-loader": "^8.0.6","babel-polyfill": "^6.26.0","css-loader": "^3.6.0","extract-text-webpack-plugin": "^3.0.2","file-loader": "^5.1.0","html-webpack-plugin": "^3.2.0","node-sass": "^4.14.1","sass-loader": "^7.0.1","style-loader": "^1.3.0","url-loader": "^3.0.0","wasm-worker": "^0.4.0","webpack": "^4.41.6","webpack-cli": "^3.3.11","webworkify-webpack": "^2.1.5"},"dependencies": {"browser-sync": "^2.26.10","browserify": "^16.5.1","browserify-derequire": "^1.0.1","browserify-versionify": "^1.0.6","core-js": "^3.6.5","env": "0.0.2","es6-promise": "^4.2.8","eslint": "^7.0.0","eslint-plugin-import": "^2.20.2","eslint-plugin-node": "^11.1.0","eslint-plugin-promise": "^4.2.1","eslint-plugin-standard": "^4.0.1","eslint-plugin-typescript": "^0.14.0","istanbul-instrumenter-loader": "^3.0.1","jsencrypt": "^3.0.0-rc.1","node-polyfill-webpack-plugin": "^1.1.4","regenerator": "^0.13.1","state-machine": "^1.0.4","svg-sprite-loader": "^6.0.11","terser-webpack-plugin": "^5.3.1","typescript": "^3.8.3","typescript-eslint-parser": "^22.0.0","wasm-loader": "^1.3.0","webassemblyjs": "^1.9.0","webpack-merge": "^4.2.2","webworkify": "^1.5.0"}
}

6.webpack.config.js文件的相关配置

const webpack = require('webpack');
const pkg = require('./package.json');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');let config = {entry: {SkeyeWebPlayer: './src/index.js'},resolve: {extensions: ['.ts', '.js']},output: {filename: '[name].js',path: path.resolve(__dirname, './dist'),library: 'SkeyeWebPlayer',libraryTarget: 'umd',libraryExport: 'default',globalObject: 'this'},plugins: [// new NodePolyfillPlugin(),new webpack.DefinePlugin({__VERSION__: JSON.stringify(pkg.version)})],optimization: {splitChunks: false// minimizer: [//     new TerserPlugin({//         extractComments: false,//     })// ]},module: {rules: [{test: /(\.jsx|\.js)$/,use: {loader: 'babel-loader',options: {babelrc: false,'presets': [['@babel/preset-env', {loose: true,modules: false,targets: {browsers: ['chrome >= 47','firefox >= 51','ie >= 11','safari >= 8','ios >= 8','android >= 4']}}]]}}},{test: /\.js/, //babel转化es6到es5exclude: /node_modules/,use: {loader: 'babel-loader',options: {plugins: ['@babel/plugin-transform-runtime']}}},{test: /\.(css|scss)$/,use: [{loader: "style-loader" // creates style nodes from JS strings}, {loader: "css-loader" // translates CSS into CommonJS}, {loader: "sass-loader" // compiles Less to CSS}],exclude: /node_modules/},{test: /\.(woff2?|svg|eot|ttf|otf)(\?.*)?$/,loader: 'url-loader',// exclude: [path.resolve(__dirname, 'src/control-bar/icon')], // 排除该目录  其他规则中有svg 需要加入排除options: {limit: 10000000,name: '[name].[hash:8].[ext]'}},{test: /\.wasm$/,include: path.resolve(__dirname, 'wasm'),use: [{loader: 'wasm-loader'}]}]},node: {fs: 'empty'}
};module.exports = (env, argv) => {if (argv.mode === 'production') {config.output.filename = '[name].min.js';}return config;
};]}]},node: {fs: 'empty'}
};module.exports = (env, argv) => {if (argv.mode === 'production') {config.output.filename = '[name].min.js';}return config;
};

SkeyeWebPlayer.js H5播放器开发之webpack项目创建级编译配置（一）相关推荐

SkeyeWebPlayer.js H5播放器开发之webpack编译flv.js实现基础播放器功能（二）
SkeyeWebPlayer.js H5播放器是由成都视开信息科技开发和维护的一个完善的RTSP.FLV.HLS等多种流媒体协议播放,视频编码支持H.264,H.265,音频支持AAC,支持TCP/U ...
SkeyeWebPlayer.js H5播放器是怎么样炼成的
SkeyeWebPlayer.js H5播放器是由成都视开信息科技开发和维护的一个完善的RTSP.FLV.HLS等多种流媒体协议播放,视频编码支持H.264,H.265,音频支持AAC,支持TCP/U ...
SkeyeWebPlayer.js H5播放器开发之播放器video动态创建（三）
SkeyeWebPlayer.js H5播放器是由成都视开信息科技开发和维护的一个完善的RTSP.FLV.HLS等多种流媒体协议播放,视频编码支持H.264,H.265,音频支持AAC,支持TCP/U ...
SkeyeWebPlayer.js H5播放器使用文档说明
SkeyeWebPlayer.js H5播放器,是一款能够同时支持HTTP.HTTP-FLV.HLS(m3u8)视频直播与视频点播等多种协议, 支持H.264.H.265.AAC等多种音视频编码格式, ...
SkeyeWebPlayer.js H5播放器开发之播放器控制栏部分功能的实现（四）
SkeyeWebPlayer.js H5免费播放器支持Websocket-RTSP播放; 支持 m3u8(HLS) 播放; 支持 HTTP-FLV/WS-FLV 播放; 支持 HEVC/H265 播 ...
Android 音乐播放器开发之 maven() { url “https://maven.google.com“} 报错
1. 问题描述在安卓音乐播放器开发中, 遇到了一些旧版本的问题, 在新版本的Android Studio 中已经改变了, 故记录一下. 旧版本中,下面这两部分是写在一块的, allprojects ...
免费视频直播、点播H5播放器SkeyeWebPlayer播放常见问题
免费视频直播.点播H5播放器SkeyeWebPlayer使用常见问题 1.用常见问题--配置iframe允许自动播放和全屏 SkeyeWebPlayer播放器在PC上正常情况下单击播放器的全屏按钮是可 ...
免费视频直播、点播H5播放器SkeyeWebPlayer 结合百度地图sdk实现电子地图播放功能
免费视频直播.点播H5播放器SkeyeWebPlayer 结合vue-baidu-map百度地图组件实现电子地图播放功能,最终效果如图所示: SkeyeWebPlayer播放器如何在vue-baidu ...
网页全终端视频直播/点播H5播放器EasyPlayer.js正式发布，支持H.265网页播放
在之前的多篇博客<历时半年,终于研发完成了Web网页对H.265(HEVC)直播和点播的支持,WebAssembly(wasm)>.<EasyPlayer.js开发Web H5网页播 ...

SkeyeWebPlayer.js H5播放器开发之webpack项目创建级编译配置（一）

1.首先创建一个webpack项目。

2.在package.json文件中的script中添加

3.执行 npm run dev，执行后会在dist目录下生成SkeyeWebPlayer.js文件，就说明准备工作已经做好了。

4.扩展

（1）配置本地服务器（官网地址 https://www.npmjs.com/package/webpack-dev-server）。

（2）添加处理css/scss文件类型（安装指定版本，高版本会报错）。

5.package.json相关的依赖包

6.webpack.config.js文件的相关配置

SkeyeWebPlayer.js H5播放器开发之webpack项目创建级编译配置（一）相关推荐

最新文章

热门文章

SkeyeWebPlayer.js H5播放器开发之webpack项目创建级编译配置（一）

1.首先创建一个webpack项目。

2.在package.json文件中的script中添加

3.执行 npm run dev，执行后会在dist目录下生成SkeyeWebPlayer.js文件，就说明准备工作已经做好了。

4.扩展

（1）配置本地服务器（官网地址 https://www.npmjs.com/package/webpack-dev-server）。

（2）添加处理css/scss文件类型 （安装指定版本，高版本会报错）。

5.package.json相关的依赖包

6.webpack.config.js文件的相关配置

SkeyeWebPlayer.js H5播放器开发之webpack项目创建级编译配置（一）相关推荐

最新文章

热门文章

（2）添加处理css/scss文件类型（安装指定版本，高版本会报错）。