devtool参数

这个参数控制是否生成,以及如何生成source map,已经在官网的doc说明总结了。

下表总结了各个参数和使用的情况

devtool 构建速度 重新构建速度 生产环境 品质(quality)
(none)
+++ +++ yes 打包后的代码
eval
+++ +++ no 生成后的代码
cheap-eval-source-map
+ ++ no 转换过的代码(仅限行)
cheap-module-eval-source-map
 
o ++ no 原始源代码(仅限行)
eval-source-map
-- + no 原是源代码
cheap-source-map
+ o yes 转换过的代码(仅限行)
cheap-module-source-map
o - yes 原是源代码(仅限行)
inline-cheap-source-map
+ o no 转换过的代码(仅限行)
inline-cheap-module-source-map
o - no 原始源代码(仅限行)
source-map
-- -- yes 原始源代码
inline-source-map
-- -- no 原是源代码
hidden-source-map
-- -- yes 原是源代码
nosources-source-map
-- -- yes 无源代码内容

+++ 非常快速, ++ 快速, + 比较快, o 中等, - 比较慢, -- 慢

有关品质的说明

  1. 打包后的代码 - 将所有生成的代码视为一大块代码。你看不到相互分离的模块。
  2. 生成后的代码 - 每个模块相互分离,并用模块名称进行注释。可以看到 webpack 生成的代码。示例:你会看到类似 var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a();,而不是 import {test} from "module"; test();
  3. 转换过的代码 - 每个模块相互分离,并用模块名称进行注释。可以看到 webpack 转换前、loader 转译后的代码。示例:你会看到类似 import {test} from "module"; var A = function(_test) { ... }(test);,而不是 import {test} from "module"; class A extends test {}
  4. 原始源代码 - 每个模块相互分离,并用模块名称进行注释。你会看到转译之前的代码,正如编写它时。这取决于 loader 支持。
  5. 无源代码内容 - source map 中不包含源代码内容。浏览器通常会尝试从 web 服务器或文件系统加载源代码。你必须确保正确设置 output.devtoolModuleFilenameTemplate,以匹配源代码的 url。
  6. (仅限行) - source map 被简化为每行一个映射。这通常意味着每个语句只有一个映射(假设你使用这种方式)。这会妨碍你在语句级别上调试执行,也会妨碍你在每行的一些列上设置断点。与压缩后的代码组合后,映射关系是不可能实现的,因为压缩工具通常只会输出一行。

对于开发环境

以下选项非常适合开发环境:

  1. eval - 每个模块都使用 eval() 执行,并且都有 //@ sourceURL。此选项会非常快地构建。主要缺点是,由于会映射到转换后的代码,而不是映射到原始代码(没有从 loader 中获取 source map),所以不能正确的显示行数。
  2. eval-source-map - 每个模块使用 eval() 执行,并且 source map 转换为 DataUrl 后添加到 eval() 中。初始化 source map 时比较慢,但是会在重新构建时提供比较快的速度,并且生成实际的文件。行数能够正确映射,因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。
  3. cheap-eval-source-map - 类似 eval-source-map,每个模块使用 eval() 执行。这是 "cheap(低开销)" 的 source map,因为它没有生成列映射(column mapping),只是映射行数。它会忽略源自 loader 的 source map,并且仅显示转译后的代码,就像 eval devtool。
  4. cheap-module-eval-source-map - 类似 cheap-eval-source-map,并且,在这种情况下,源自 loader 的 source map 会得到更好的处理结果。然而,loader source map 会被简化为每行一个映射(mapping)。

对于生产环境

这些选项通常用于生产环境中:

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

source-map - 整个 source map 作为一个单独的文件生成。它为 bundle 添加了一个引用注释,以便开发工具知道在哪里可以找到它。

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

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

你不应将 source map 文件部署到 web 服务器。而是只将其用于错误报告工具。

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

这仍然会暴露反编译后的文件名和结构,但它不会暴露原始代码。

webpack学习笔记(4)--webpack.config.js的更多相关文章

  1. webpack学习笔记(3)--webpack.config.js

    module 参数 使用下面的实例来说明 module.exports = { module: { rules: [ { test: /\.css$/, use: 'css-loader' }, { ...

  2. Webpack学习笔记九 webpack优化总结

    webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...

  3. webpack学习笔记(1)--webpack.config.js

    主要的信息都是来自于下方所示的网站 https://webpack.docschina.org/configuration 从 webpack 4.0.0 版本开始,可以不用通过引入一个配置文件打包项 ...

  4. webpack学习笔记(2)--webpack.config.js

    3 模式 mode mode 参数设置为 development(开发模式), production(生产模式) 或 none(无),可以启用对应环境下 webpack 内置的优化.默认值为 prod ...

  5. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  6. webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...

  7. 【原】webpack学习笔记

    之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...

  8. 更博不能忘——webpack学习笔记

    webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不 ...

  9. webpack学习笔记—webpack安装、基本配置

    文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...

随机推荐

  1. [bzoj2600][Ioi2011]ricehub_二分

    ricehub bzoj-2600 Ioi-2011 题目大意:在数轴上有r块稻田,稻田坐标为整数.计划建造一个米仓,使得它可以收取尽量多的稻米.米仓的坐标仍需为整数.每一块权值为val的稻田距离米仓 ...

  2. 框架统一出参数DTO格式

    这个可以没必要定义. 每个接口返回自己的数据格式就好

  3. Dozer--第三方复制工具,哎哟,还不错!

    Dozer简单点说,就是拷贝工具,也是复制工具的意思,官方的解释是:Dozer is a Java Bean to Java Bean mapper that recursively copies d ...

  4. andoid电阻触摸移植

    这里我使用的是210的开发板 系统Android4.0.4 内核linux3.0.8 要用电阻屏一般都是使用tslib进行校准的 这里给个我在android上用的tslib 下载地址 http://d ...

  5. NSAttributedString宽高计算小技巧

    通常对于CoreText之类自己实现绘制的控件来说,计算富文本的宽高事实上须要依赖CTFramesetterSuggestFrameSizeWithConstraints这种方法. 但有些时候.我们可 ...

  6. 2016.04.06,英语,《Vocabulary Builder》Unit 10

    put, from the Latin verb putare, meaning 'to think, consider, or believe'. reputation: [ˌrepju'teɪʃn ...

  7. Spark MLlib介绍

    Spark MLlib介绍 Spark之所以在机器学习方面具有得天独厚的优势,有以下几点原因: (1)机器学习算法一般都有很多个步骤迭代计算的过程,机器学习的计算需要在多次迭代后获得足够小的误差或者足 ...

  8. nyoj--92--图像有用区域(模拟)

    图像有用区域 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描述 "ACKing"同学以前做一个图像处理的项目时,遇到了一个问题,他需要摘取出图片中某个黑 ...

  9. hdoj--1864--最大保险额(背包)

    最大报销额 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  10. 转四种常见的post请求

    HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中 POST 一般用来向服务端提交数据,本文 ...