在前端开发中，Webpack 是一个非常重要的工具，它可以将多个 JavaScript 文件打包成一个或多个文件，以减小文件体积、优化加载速度等。而在使用 TypeScript 进行开发时，Webpack 也是必不可少的。但是，当我们在开发过程中遇到问题时，如何调试 Webpack 打包后的代码呢？本文将为大家介绍 TypeScript 中如何调试 Webpack 打包后的代码。
一、使用 Source Map
在开发中，我们经常会使用 Source Map 来进行调试。Source Map 是一种映射文件，它可以将打包后的代码映射回原始的代码，从而方便我们进行调试。
在使用 TypeScript 和 Webpack 进行开发时，只需要在 Webpack 配置文件中开启 Source Map，就可以在浏览器的开发者工具中进行调试了。我们可以在 webpack.config.js 文件中进行如下配置：
module.exports = {
// ...
devtool: 'source-map',
// ...
}上述配置中，devtool 设置为 source-map，表示开启 Source Map 功能。
二、使用 Chrome DevTools 进行调试
开启 Source Map 后，我们可以在 Chrome DevTools 中进行调试。具体步骤如下：
- 在浏览器中打开开发者工具（F12）；
- 在 Sources 面板中找到打包后的代码文件（一般以
.js结尾），并点击左侧的{}图标，开启 Source Map； - 在打包后的代码文件中设置断点，进行调试。
下面给出一个示例代码：
// src/index.ts
function add(a: number, b: number) {
return a + b;
}
console.log(add(1, 2));// 打包后的代码
!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t);function n(e,t){return e+t}console.log(n(1,2))}]);在 Chrome DevTools 中，我们可以找到打包后的代码文件 main.js，并在其中设置断点。
然后，在浏览器中运行代码，就可以停在断点处进行调试了。
三、使用 VS Code 进行调试
除了使用 Chrome DevTools 进行调试外，我们还可以在 VS Code 中进行调试。具体步骤如下：
- 在 VS Code 中打开项目；
- 在左侧的菜单栏中选择 Debug；
- 点击左侧的齿轮图标，选择 Add Configuration；
- 在弹出的菜单中选择 Node.js；
- 修改
launch.json文件，添加sourceMaps和outFiles配置项。
下面给出一个示例 launch.json 文件：
-- -------------------- ---- -------
-
---------- --------
----------------- -
-
------- -------
---------- ---------
------- ------ ---------- -- ---------
---------- ----------------------------------
------------- -----
----------- -
---------------------------------
-
-
-
-上述配置中，sourceMaps 设置为 true，表示开启 Source Map 功能；outFiles 指定打包后的代码文件路径。设置完成后，我们可以在 VS Code 中进行调试了。
四、总结
本文介绍了在 TypeScript 中如何调试 Webpack 打包后的代码，包括使用 Source Map 和 Chrome DevTools 进行调试，以及使用 VS Code 进行调试。这些方法都非常实用，可以帮助我们快速定位问题，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6506a1b795b1f8cacd2647ba