详解webpack打包后如何调试的方法步骤

在配置devtool时,webpack给我们提供了四种选项

source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度;

cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map,不带列映射提高了打包速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便。

eval-source-map:使用eval打包源文件模块,在同一个文件中生产干净的完整版的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项,在生产阶段则一定要不开启这个选项。

cheap-module-eval-source-map:这是在打包文件时最快的生产source map的方法,生产的 Source map 会和打包后的JavaScript文件同行显示,没有影射列,和eval-source-map选项具有相似的缺点。

配置开发环境

module.exports = { devtool: 'source-map', entry:"", output: { } .... }

详解webpack打包后如何调试的方法步骤

不配置开发环境

没有webpack选项

详解webpack打包后如何调试的方法步骤

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/75c0bd1e5b4c93513f75cd956a0a47f8.html