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

web小门神 lv.1

发布时间：2022-11-19 19:20:18 456

相关标签： # javascript# html# typescript# chrome# 服务器

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文件，就说明准备工作已经做好了。

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

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

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到es5
        exclude: /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;
};