zoukankan      html  css  js  c++  java
  • webpack的devtool

    这里以环境分类为分析方向

    1.对开发环境

    eval - 每个模块都使用 eval() 执行,并且都有 //@ sourceURL。此选项会非常快地构建。主要缺点是,由于会映射到转换后的代码,而不是映射到原始代码(没有从 loader 中获取 source map),所以不能正确的显示行数。

    eval-source-map - 每个模块使用 eval() 执行,并且 source map 转换为 DataUrl 后添加到 eval() 中。初始化 source map 时比较慢,但是会在重新构建时提供比较快的速度,并且生成实际的文件。行数能够正确映射,因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。

    cheap-eval-source-map - 类似 eval-source-map,每个模块使用 eval() 执行。这是 "cheap(低开销)" 的 source map,因为它没有生成列映射(column mapping),只是映射行数。它会忽略源自 loader 的 source map,并且仅显示转译后的代码,就像 eval devtool。

    cheap-module-eval-source-map - 类似 cheap-eval-source-map,并且,在这种情况下,源自 loader 的 source map 会得到更好的处理结果。然而,loader source map 会被简化为每行一个映射(mapping)。

    2.对生产环境

    (none)(省略 devtool 选项) - 不生成 source map。这是一个不错的选择。

    source-map - 整个 source map 作为一个单独的文件生成。它为 bundle 添加了一个引用注释,以便开发工具知道在哪里可以找到它。并在打包文件的末尾添加//# souceURL,注释会告诉JS引擎原始文件位置。

    你应该将你的服务器配置为,不允许普通用户访问 source map 文件!

    hidden-source-map - 与 source-map 相同,但不会为 bundle 添加引用注释。如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息,但不想为浏览器开发工具暴露你的 source map,这个选项会很有用。

    nosources-source-map - 创建的 source map 不包含 sourcesContent(源代码内容)。它可以用来映射客户端上的堆栈跟踪,而无须暴露所有的源代码。你可以将 source map 文件部署到 web 服务器

    参考:https://www.webpackjs.com/configuration/devtool/

       https://www.cnblogs.com/hhhyaaon/p/5657469.html

       https://blog.csdn.net/liwusen/article/details/79414508

  • 相关阅读:
    js 改变颜色值
    React之使用Context跨组件树传递数据
    App.js实现使用js开发app的应用,此文是中文文档
    转: CSS3 @media 用法总结
    转: 如何用手机访问电脑本地 localhost 网页或者服务器, 以调试web项目
    js 替换字符串中所有匹配的字符
    转:display:flex不兼容Android、Safari低版本的解决方案 【flex布局】
    转:HTML5页面如何在手机端浏览器调用相机、相册功能
    文本相似度度量
    idea中maven中jdk版本的选择(转)
  • 原文地址:https://www.cnblogs.com/myzy/p/9908920.html
Copyright © 2011-2022 走看看