zoukankan      html  css  js  c++  java
  • WebPack打包后如何调试

    作为一个程序员每天的大部分工作就是调试自己写的程序,那我们使用了webpack后,所以代码都打包到了一起,给调试带来了麻烦,但是webpack已经为我们充分考虑好了这点,它支持生产Source Maps来方便我们的调试。
    在使用webpack时只要通过简单的devtool配置,webapck就会自动给我们生产source maps 文件,map文件是一种对应编译文件和源文件的方法,让我们调试起来更简单。

    四种选项

    在配置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选项具有相似的缺点。
    四种打包模式,有上到下打包速度越来越快,不过同时也具有越来越多的负面作用,较快的打包速度的后果就是对执行和调试有一定的影响。
    
    个人意见是,如果大型项目可以使用source-map,如果是中小型项目使用eval-source-map就完全可以应对,需要强调说明的是,source map只适用于开发阶段,上线前记得修改这些调试设置。

    简单的配置:

    module.exports = {
    //devtool调试 devtool:
    'eval-source-map', entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" } }

    去除打包生成的map文件

    productionSourceMap: false

    调试在开发中也是必不可少的,但是一定要记得在上线前一定要修改webpack配置,在打出上线包。

    更多webpack相关例子我放到Github上 →  传送门 

  • 相关阅读:
    JavaWeb学习之什么是Servlet、如何使用servlet、为什么这样使用、servlet的虚拟路径、关于缺省Servlet(2)
    Android Drawable
    Android 热补丁和热修复
    Android Immersive Mode (沉浸模式) 还是 Translucent Bars (透明状态栏)
    Android & iOS 第三方 Crash ANR 捕捉上传
    Android中的dispatchTouchEvent()、onInterceptTouchEvent()和onTouchEvent()
    Android Volley
    Android HttpURLConnection And HttpClient
    Android Fragment 生命周期及其正确使用(建议使用自定义View替换Fragment)
    Android Intent (可通过URL启动 Activity)
  • 原文地址:https://www.cnblogs.com/Model-Zachary/p/7748118.html
Copyright © 2011-2022 走看看