Sleepwalker's Blog

# devtool

# 关键字

可以利用一些关键字来简单理解

  • eval: 使用eval包裹代码

  • source-map: 产生.map文件

  • cheap: 不包含列信息

  • inline: 将.map作为DataURLs嵌入, 不单独生成.map文件

  • module: 包含loader的source-map

# devtool: eval

这个和上面提的关键字不同, 这是一种具体的devtool参数

webpack打包后的代码被包裹在eval内执行, 打包后的代码类似下面这样

/******/ (function(modules) { // webpackBootstrap
          //...
/******/ })
/************************************************************************/
/******/ ({

/***/ "./src/hello.js":
/*!**********************!*\
  !*** ./src/hello.js ***!
  \**********************/
/*! exports provided: hello, hello2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"hello\", function() { return hello; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"hello2\", function() { return hello2; });\nfunction _readOnlyError(name) { throw new Error(\"\\\"\" + name + \"\\\" is read-only\"); }\n\nfunction hello() {\n  console.log('hello world');\n  return 'hello world';\n}\nfunction hello2() {\n  console.log('hello2');\n}\na = (_readOnlyError(\"a\"), 2);\nvar a = 1;\n\n//# sourceURL=webpack:///./src/hello.js?");

/***/ }),

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _hello_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./hello.js */ \"./src/hello.js\");\n\nObject(_hello_js__WEBPACK_IMPORTED_MODULE_0__[\"hello\"])();\n\n//# sourceURL=webpack:///./src/index.js?");

/***/ })

/******/ });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

可以看到每个module生成的代码被eval执行, 由于我们执行的是webpack生成的代码(generated code), 并且没有额外的sourceMap, 因此,

TIP

generated code - You see each module separated from each other, annotated with module names. You see the code generated by webpack. Example: Instead of import {test} from "module"; test(); you see something like var module__WEBPACK_IMPORTED_MODULE_1__ = webpack_require(42); module__WEBPACK_IMPORTED_MODULE_1__.a();.

  1. 模块信息被保留了

  2. build过程速度很快, 因为不需要生成额外的map文件

  3. 不适合生产环境, 因为代码由eval执行

可以看到eval分别执行各自模块的生成代码, 但是代码是由eval执行, 代码是来自哪个js文件? eval内的代码结尾处有注释,

eval("//# sourceURL=webpack:///./src/hello.js?");
1

利用sourceURL, 来指明eval执行的代码来自hello.js, 在chrome source中目录结构如下

── webpack://
│   └── ./src
|          └──hello.js
1
2
3

sourceURL

若sourceURL为http://www.domain.com/hello.js

── www.domain.com
|          └──hello.js
1
2

https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps?hl=zh-cn https://www.thecssninja.com/demo/source_mapping/compile.html

所以eval这种方式, 可以帮助我们在generated code的层面调试代码,

如果devtool: none, 那我们连代码是属于哪个文件的提示信息也没有了, 只能认为判断, 因为, generated code 去掉eval, 那就可以认为是bundle code, 因为通过eval提供的模块化信息没了. :;:tip bundled code - You see all generated code as a big blob of code. You don't see modules separated from each other. :::

# eval-cheap-source-map

webpack生成的代码由eval执行, eval中包含sourceURL, sourceMappingURL内联sourceMap(包含行信息), sourceMap对应代码为经过loader之后的代码

内联的sourceMap是DataURLs的形式

代码质量transformed code

TIP

transformed code - You see each module separated from each other, annotated with module names. You see the code before webpack transforms it, but after Loaders transpile it. Example: Instead of import {test} from "module"; class A extends test {} you see something like import {test} from "module"; var A = function(_test) { ... }(test);

# eval-cheap-module-source-map

相比上一种, sourceMap对应的代码为loader之前的源代码

代码质量original source

TIP

original source - You see each module separated from each other, annotated with module names. You see the code before transpilation, as you authored it. This depends on Loader support.

# eval-source-map

相比eval-cheap-module-source-map, 多了列信息

TIP

按照关键字的规则, 显然是叫eval-module-source-map更合适? 测试了这两种写法, eval中的内容没有区别, 应该是一样的.

# inline 和eval-xxx 不会共存

inline和eval-xxx无法同时实现的, inline 将整个js文件的sourceMap以//# sourceMappingURL=DataUrls的形式插入到js文件底部

//# sourceMappingURL=data:application/json;charset=utf-8;base64,....
1

而eval-xxx是将eval执行代码的sourceMap以DataUrls的形式插入到eval内部

显然eval执行的代码量比整个js执行的代码量要小

eval("...//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,...\n//# sourceURL=webpack-internal:///./src/hello.js\n");
1

大致了解后, 具体查官方文档就可以了

https://webpack.js.org/configuration/devtool/

← webpack打包📦出来的代码 →