ts+webpack视频播放器组件（一）

原视频：https://www.bilibili.com/video/BV1sU4y1a7ri

day1-新建文件夹、webpack构建项目

webpack

先创建项目的配置文件package.json
使用npm init -y命令
局部安装webpack
使用pnpm i -D webpack webpack-cli命令
进入项目，新建webpack.config.js文件
因为这个文件是一个node文件，所以需要提供对外的接口，使用模块化开发
1
2
3
4
module.exports = {
entry:'',
output:{}
}

在项目里新建main.js和测试引入功能用的a.js（a.js后面删掉）

1
2
3

//a.js
let a = 'test';
export default a;

1
2
3

//main.js
import a from './a.js'
console.log(a)//会输出test

在webpack.config.js的出口对象里添加属性

const path = require('path')

module.export = {
	entry:'./src/main.js',
	output:{
		path:path.resolve(__dirname,'dist')//这是nodejs的绝对路径api
		filename:'main.js'
	}
}

如果想运行webpack了，就用对应脚本先构建。而这里因为我们是局部安装，导致会用到全局的webpack。所以这时候需要在package.json里面的脚本里添加一个新的脚本，用来调用默认的局部webpack。在下面的代码中，添加了build去构建。

//package.json
{
  "name": "miniplayer",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.84.1",
    "webpack-cli": "^5.1.1"
  }
}

构建成功之后，去到dist目录下面看构建好的项目。发现main.js中的代码不好阅读。因为我们没有在webpack.config.js里定义他用的模式。需要添加mode

const path = require("path");

module.exports = {
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname,'dist'),
    filename: "main.js"
  },
  mode:'development'
}

然后为了展示main.js，我们还需要一个index的html文件，在dist目录下新建html文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="./main.js"></script>
</body>
</html>

有了html，我们还需要css样式。创建一个测试用的a.css，然后在main.js中导入

//a.css
body{
  background-color: pink;
}

//main.js
import aa from './a.js'
import './assets/css/a.css'

console.log(aa)

导入css后，我们再去build时，会报错提示没有对应的loader，这时候需要去cmd里下载对应loader。使用pnpm i -D style-loader css-loader

下载成功后，就要去webpack.config.js配置对应的模块规则。在module属性添加rules，用正则针对对应的文件，和使用的loader。因为顺序是从右到左，所以应该吧css-loader写在后面，因为loader是解析css，style-loader是把样式放进html中。

const path = require("path");

module.exports = {
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname,'dist'),
    filename: "main.js"
  },
  module:{
    rules: [
      {
        test: /\.css$/,
        use:['style-loader','css-loader']
      }
    ]
  },

  mode:'development'
}

dist的html文件是我们自己定义的，为了开发的方便，我们想让webpack可以帮我们生成dist中的html，这时候就需要使用到html-webpack-plugin插件。使用pnpm i -D html-webpack-plugin下载
下载成功后，我们先在src里新建一个index.html文件，用来给webpack以此为基础生成dist打包文件的。

接着进入webpack.config.js中，对plugins属性进行配置，注意，要先引入html的那个插件const HtmlWebpackPlugin = require('htem-webpack-plugin')。

//webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname,'dist'),
    filename: "main.js"
  },
  module:{
    rules: [
      {
        test: /\.css$/,
        use:['style-loader','css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",

    })
  ],
  mode:'development'
}

根据个人需求，添加clean-webpack-plugin插件
为了让开发时，代码的改变可以实现热更新，我们需要安装webpack-dev-serve，使用pnpm i -D webpack-dev-serve命令安装。

安装后在webpack.config.js中的devServer属性进行配置目标目录，并且在package.json脚本中增加新脚本。

//webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname,'dist'),
    filename: "main.js"
  },
  devServer: {
    static:'/dist',
    open:true
  },
  module:{
    rules: [
      {
        test: /\.css$/,
        use:['style-loader','css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
    new CleanWebpackPlugin()
  ],
  mode:'development'
}

//package.json
{
  "name": "miniplayer",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
    "serve": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.8.1",
    "html-webpack-plugin": "^5.5.1",
    "style-loader": "^3.3.3",
    "webpack": "^5.84.1",
    "webpack-cli": "^5.1.1",
    "webpack-dev-server": "^4.15.0"
  }
}