详解webpack打包后如何调试的方法步骤
更新时间：2018年11月07日 15:00:08 作者：渣渣辉
这篇文章主要介绍了详解webpack打包后如何调试的方法步骤,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack.config.js
在配置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选项
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
在iframe中显示的网页已经是一件平凡无奇的事了，不过可能依然有很多的童鞋没不知所措吧，没关系，因为本文的出现将会带你脱离苦海，感性的朋友可以了解下啊，或许对你有所帮助2013-02-02
这篇文章主要介绍了微信公众号平台接口开发 获取微信服务器IP地址方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
下面小编就为大家带来一篇纯js实现画一棵树的示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最近这几天在升级自己的MVVM 框架,遇到很多小问题,所以想着就在这里统一解决了。文中主要介绍了关于Javascript中with的替代方法与String中的正则方法，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-12-12
这篇文章主要介绍了JavaScript闭包原理与用法,结合实例形式详细分析了JavaScript闭包相关概念、原理、用法及操作注意事项,需要的朋友可以参考下2020-05-05
用官方点的话讲继承是面向对象三大特征之一，可以使得子类具有父类的属性和方法，同时还可以在子类中重新定义以及追加属性和方法。本文整理了JavaScript实现继承的7种方式，需要的可以了解一下2023-04-04
这篇文章主要介绍了eslint+prettier 统一代码风格的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了JavaScript监听一个DOM元素大小变化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
本文详细讲解了使用JS动态构建目录树的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-01-01
本文主要介绍了几种响应式文字的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-05-05
最新评论