# 一.认识插件

# 安装

package.json

{
  "name": "2.plugin",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0"
  }
}

1
2
3
4
5
6
7
8
9
10

# 文件

src/index.js

console.log(1111111111)

plugins/AsyncPlugin.js

class AsyncPlugin {
  apply(complier) {
    complier.hooks.emit.tapAsync("AsyncPlugin", (compliation, cb) => {
      setTimeout(() => {
        console.log("文件发射出来")
        cb()
      }, 1000)
    })
    complier.hooks.emit.tapPromise("AsyncPlugin", (compliation) => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log("等一秒")
          resolve()
        }, 1000)
      })
    })
  }
}
module.exports = AsyncPlugin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

plugins/DonePlugin.js

class DonePlugin {
  apply(complier) {
    complier.hooks.done.tap("DonePlugin", (stats) => {
      console.log("编译完成")
    })
  }
}
module.exports = DonePlugin

1
2
3
4
5
6
7
8

# 打包

npx webpack

控制台出现：

文件发射出来
等一秒
编译完成

1
2
3

完整代码 (opens new window)

← 常见的 plugin 二.文件列表插件 →