使用webpack

  1. 创建一个demo项目，用来调试webpack和webpack-cli
  2. 运行webpack-cli将src/index.js打包为dist/main.js

demo

λ yarn add webpack@5.10.1 webpack-cli@4.2.0

/src/index.js

  1. const a = 'hi'
  2. console.log(a)

λ /node_modules/.bin/webpack-cli
/dist/main.js
image.png

调试

打开 /node_modules/.bin/webpack-cli 这是一个bash脚本
image.png
打开 /node_modules/webpack-cli/bin/cli.js
直接打log来进行调试
image.png
通过运行—inspect-brk调试代码
λ node --inspect-brk ./node_modules/webpack-cli/bin/cli.js
打开Chrome进行调试
image.png

下载webpack-cli

GitHub
λ git clone [https://github.com/webpack/webpack-cli.git](https://github.com/webpack/webpack-cli.git)
打开项目,切换版本 安装依赖
λ git reset --hard webpack-cli@4.2.0

不同项目中，运行yarn link的目录不同
λ cd packages/webpack-cli/
λ yarn link
image.png

现在可以在demo项目中连接webpack-cli
打开 demo
λ yarn link webpack-cli
image.png

在cli项目中 /packages/webpack-cli/bin/cli.js 中打log
image.png

在demo项目中 λ node ./node_modules/webpack-cli/bin/cli.js
image.png
这样我们就是使用了下载的CLI项目中的源代码作为demo项目的依赖
现在取消掉link
λ yarn unlink webpack-cli
image.png
重新安装
λ rm -rf node_modules/
λ yarn install

下载webpack

用同样的方式从GitHub下载webpack源码，切换到v5.10.1
λ git reset --hard v5.10.1