Webpack 是前端開發(fā)的常用工具。

在使用 Webpack 的時候，我們經(jīng)常會引入額外的 loader 和 plugin 來定制構(gòu)建過程。而有些 loader 和 plugin 支持傳入函數(shù)，來提供運行時配置。比如，webpack-manifest-plugin 插件的 options.filter 選項。

涉及到 webpack 運行時調(diào)用，那就離不開代碼調(diào)試。

本文就向大家介紹，如何用 VSCode 調(diào)試 Webpack。

如果你不了解 VSCode 的調(diào)試功能，可以先閱讀：VSCode 調(diào)試 Node.js 指南

---

準備調(diào)試用例

用例已經(jīng)準備好了，可以直接從 github clone 下來。https://github.com/concefly/vscode-tutorial/tree/master/webpack-debug

配置 VSCode 調(diào)試功能

通常情況下，我們會在 package.json script 里配 "build": "webpack --config webpack.config.js"，然后執(zhí)行 npm run build 來進行 webpack 構(gòu)建。

但如果要用 vscode 調(diào)試的話，就不能這么配了，而是要改成 "build": "node --inspect-brk=5858 ./node_modules/.bin/webpack --config webpack.config.js"。--inspect-brk 是調(diào)試端口號，傳給 node 進程后，node 就能對外暴露調(diào)試端口，進而在 VSCode 里調(diào)試。

然后，我們修改一下 .vscode/launch.json 文件，配置調(diào)試參數(shù)。

{"version": "0.2.0","configurations": [{"type": "node","request": "launch","name": "Build","runtimeExecutable": "npm","runtimeArgs": ["run", "build"],"port": 5858}] }

有幾個參數(shù)比較重要：

runtimeExecutable: 程序執(zhí)行器，就是啟動程序的腳本。默認是 node，但我們這里用 npm 來啟動 webpack build 指令，所以這里要配 npm

runtimeArgs: 傳遞給程序執(zhí)行器的參數(shù)

port: node 調(diào)試端口號，和剛才在 package.json script 中配的 --inspect-brk 保持一致

啟動調(diào)試

package.json script 和 .vscode/launch.json 都配置妥當(dāng)后，我們在 ManifestPlugin 的 filter 函數(shù)里打一個斷點，然后進入調(diào)試模式。

可以看到，VSCode 停在了斷點處，表明調(diào)試 webpack 成功了。

其他

如果要深入定制 webpack，基本繞不開 webpack 的 asset、chunk、module 這些概念和參數(shù)傳遞。但是官方文檔并沒有詳細解釋這些概念，一切都需要開發(fā)者自己理解和實踐。編寫 webpack 配置的同時用 VSCode 調(diào)試配置腳本，隨時斷點隨時觀察 ，能極大提高效率。

一般 npm 腳本的調(diào)試方法也可以參考此文章

總結(jié)

以上是生活随笔為你收集整理的vscode 加参数运行_VSCode 调试 Webpack 指南的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。