feat: webpack debug

okbug · Nov 21, 2021 · 535fa4c · 535fa4c
1 parent 866221d
commit 535fa4c
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 49 deletions.
diff --git a/learnWebpack/my-webpack/README.md b/learnWebpack/my-webpack/README.md
@@ -824,4 +824,53 @@ module.exports = 'title';
 
 所以在development模式下面保留.r .d .o 等方法的缩写
 
-pull requlest 1 告一段落
+pull requlest 1 告一段落
+
+
+
+
+
+
+
+## webpack中的tapable
+
+这是一个类似发布订阅的库
+
+
+```js
+import { SyncHook } from 'tapable'
+
+let syncHook = new SyncHook();
+
+// tab就是发布订阅中的on 参数是 eventName和cb
+
+syncHook.tap('just a name', (payload) => {
+    console.log('callback', payload);
+})
+
+// call就是触发回调，并且可以作为参数，并且不用传入eventName
+
+syncHook.call('zhufeng')
+```
+
+### 实现tapable
+
+
+最简版
+
+```js
+class SyncHook {
+    constructor() {
+        this.taps = [];
+    }
+
+    tap(name, fn) {
+        this.taps.push(fn);
+    }
+
+    call(...args) {
+        this.taps.forEach(tap => tap(...args))
+    }
+}
+```
+
diff --git a/learnWebpack/webpack-analysis/.vscode/launch.json b/learnWebpack/webpack-analysis/.vscode/launch.json
@@ -1,12 +1,12 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "debug webpack",
-      "cwd": "${workspaceFolder}",
-      "program": "${workspaceFolder}/node_modules/webpack/bin/webpack.js"
-    }
-  ]
-}
+// {
+//   "version": "0.2.0",
+//   "configurations": [
+//     {
+//       "type": "node",
+//       "request": "launch",
+//       "name": "debug webpack",
+//       "cwd": "${workspaceFolder}",
+//       "program": "${workspaceFolder}/node_modules/webpack/bin/webpack.js"
+//     }
+//   ]
+// }
diff --git a/learnWebpack/webpack-analysis/README.md b/learnWebpack/webpack-analysis/README.md
@@ -10,28 +10,5 @@
 
 # 调试webpack工作流程
 
-使用vscode调试
-
-在项目根目录添加 `.vscode` 文件夹，并且添加配置文件:`launch.json`
-
-```json
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "debug webpack",
-      "cwd": "${workspaceFolder}",
-      "program": "${workspaceFolder}/node_modules/webpack/bin/webpack.js"
-    }
-  ]
-}
-
-
-```
-
-注意上面`program`的webpack路径要对应自己node_modules下的路径(因为有可能多个版本webpack 导致件夹带上版本号)
-
-然后新建一个文件
+暂无文字
 
diff --git a/learnWebpack/webpack-analysis/debugger.js b/learnWebpack/webpack-analysis/debugger.js
@@ -1,17 +1,17 @@
 const webpack = require('webpack');
 const config = require('./webpack.config');
-
-
-
-const compiler = webpack(config);
-console.log(compiler)
 debugger
+const compiler = webpack(config);
+// console.log(compiler)
 compiler.run((err, state) => {
     console.log(err);
-    console.log(state.toJson({
-        assets: true,
-        chunks: true,
-        modules: true,
-        entries: true
-    }))
-})
+    // console.log(state.toJson({
+    //     assets: true,
+    //     chunks: true,
+    //     modules: true,
+    //     entries: true
+    // }))
+})
+
+// console.log(compiler.run)
+console.log(compiler.hooks.done);