配置webpack以允许浏览器调试
Jim*_*Jim 117 javascript webpack
我是webpack的新手,我正在转换现有的Web应用程序来使用它.
我正在使用webpack捆绑和缩小我的JS,这在部署时非常好,但这使得在开发过程中进行调试非常具有挑战性.
通常我使用chrome的内置调试器来调试JS问题.(或firefox上的Firebug).然而,对于webpack,所有内容都填充在一个文件中,使用该机制进行调试变得具有挑战性.
有没有办法快速打开和关闭bundeling？或者打开和关闭缩小？
我已经查看是否有一些脚本加载器配置或其他设置,但它看起来不是很明显.
我还没有时间将所有内容转换为模块和使用要求.所以我只需要使用require("script!./ file.js")模式进行加载.
dre*_*cat 92
您可以使用源映射来保留源代码与捆绑/缩小的源代码之间的映射.
Webpack提供了devtool选项来增强开发人员工具中的调试功能,只需为您创建捆绑文件的源映射.可以从命令行使用此选项,也可以在webpack.config.js配置文件中使用此选项.
下面你可以找到一个人为的例子,使用命令行生成捆绑文件(bundle.js)以及生成的源映射文件(bundle.js.map).
$ webpack --devtool source-map ./entry.js bundle.js
Hash: b13b8d9e3292806f8563
Version: webpack 1.12.2
Time: 90ms
Asset Size Chunks Chunk Names
bundle.js 1.74 kB 0 [emitted] main
bundle.js.map 1.89 kB 0 [emitted] main
[0] ./entry.js 85 bytes {0} [built]
[1] ./hello.js 59 bytes {0} [built]
的index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
entry.js
var hello = require('./hello.js');
document.body.innerHTML += 'It works ' + hello();
hello.js
module.exports = function () {
return 'Hello world!';
};
如果您在浏览器中打开index.html(我使用Chrome但我认为其他浏览器也支持它),您将在标签Source中看到您拥有file:// scheme 下的捆绑文件和源文件特殊的webpack://方案.
是的,您可以开始调试,就像您拥有原始源代码一样!尝试将断点放在一行并刷新页面.
- bundle.map指向js文件，但是如果实际的js文件也有一个地图可以说tsx或ts怎么办？ (2认同)
我认为最好使用生产和开发模式设置您的项目 https://webpack.js.org/guides/production/ 它还包括如何映射您的代码以进行调试
devtool: 'inline-source-map'
| 归档时间： |
|
| 查看次数： |
56506 次 |
| 最近记录： |