webpack devtool配置簡(jiǎn)單對(duì)比

一直對(duì)webpack的devtool配置不太了解，自己把每個(gè)配置都試了一下，做個(gè)簡(jiǎn)單的總結(jié)
  • devtool是干什么的？

Choose a developer tool to enhance debugging.
其實(shí)就是選擇一種調(diào)試代碼的方式

  • 目錄結(jié)構(gòu)


    QQ圖片20161027140919.png

  • 配置信息webpack.config.js


    YW8GUF{(@PMJLZ3IUJQHQQK.png
  • page1/index.js代碼
require('js/common/header.js');
function page1(){
  document.write('hello page1');
}
  • 究竟有哪些調(diào)試方式呢？
1.eval()

eval- Each module is executed with eval and //@ sourceURL

不支持IE8
可以設(shè)斷點(diǎn)調(diào)試，不顯示列信息，每個(gè)js模塊代碼用eval()執(zhí)行，并且在生成的每個(gè)模塊代碼尾部加上注釋?zhuān)鏦EBPACK FOOTER；module id（模塊在數(shù)組中的索引） ；sourceURL（原js路徑）。不會(huì)生成.map文件

代碼示例
//打包后的部分js代碼
([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    eval("module.exports = __webpack_require__(1);\n\n\n/*****************\n ** WEBPACK FOOTER\n ** multi p1\n ** module id = 0\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///multi_p1?");

/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {

    eval("__webpack_require__(2);\r\nfunction page1(){\r\n  document.write('hello page1');\r\n}\r\n\r\n\r\n\n\n/*****************\n ** WEBPACK FOOTER\n ** d:/webpack/src/js/page1/index.js\n ** module id = 1\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///d:/webpack/src/js/page1/index.js?");

/***/ },
/* 2 */
/***/ function(module, exports) {

    eval("function header(){\r\n  document.write('hello header');\r\n}\n\n/*****************\n ** WEBPACK FOOTER\n ** d:/webpack/src/js/common/header.js\n ** module id = 2\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///d:/webpack/src/js/common/header.js?");

/***/ }
/******/ ]);
2.source-map

A SourceMap is emitted. See also output.sourceMapFilename

可以設(shè)斷點(diǎn)調(diào)試，不顯示列信息，生成相應(yīng)的.Map文件，并在合并后的代碼尾部加上注釋//# sourceMappingURL=**.js.map ，可以看到模塊代碼并沒(méi)有被eval()包裹，此種模式并沒(méi)有將調(diào)試信息放入D打包后的代碼中，保持了打包后代碼的簡(jiǎn)潔性


QQ截圖20161028085447.png
代碼示例
//打包后的部分js代碼
/* 1 */
/***/ function(module, exports, __webpack_require__) {
    __webpack_require__(2);
    function page1(){
      document.write('hello page1');
    }
/* 2 */
/***/ function(module, exports) {
    function header(){
      document.write('hello header');
    }
/******/ ]);
//# sourceMappingURL=bundle.js.map
3.eval-source-map

Each module is executed with eval and a SourceMap is added as DataUrl to the eval

不能設(shè)斷點(diǎn)調(diào)試，不顯示列信息，可以用手動(dòng)加入debugger調(diào)試;參考第一種eval模式，跟eval不一樣的是其用base64存儲(chǔ)map信息，不會(huì)生成.Map文件，Map信息以Base64格式存放在每個(gè)模塊代碼的尾部

代碼示例
/* 1 */
 function(module, exports, __webpack_require__) {
    eval("__webpack_require__(2);\r\nfunction page1(){\r\n  document.write('hello page1');\r\n}\r\n\r\n\r\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vZDovd2VicGFjay9zcmMvanMvcGFnZTEvaW5kZXguanM/OGYwYSJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtBQUNBO0FBQ0E7QUFDQSIsImZpbGUiOiIxLmpzIiwic291cmNlc0NvbnRlbnQiOlsicmVxdWlyZSgnanMvY29tbW9uL2hlYWRlci5qcycpO1xyXG5mdW5jdGlvbiBwYWdlMSgpe1xyXG4gIGRvY3VtZW50LndyaXRlKCdoZWxsbyBwYWdlMScpO1xyXG59XHJcblxyXG5cclxuXG5cblxuLyoqKioqKioqKioqKioqKioqXG4gKiogV0VCUEFDSyBGT09URVJcbiAqKiBkOi93ZWJwYWNrL3NyYy9qcy9wYWdlMS9pbmRleC5qc1xuICoqIG1vZHVsZSBpZCA9IDFcbiAqKiBtb2R1bGUgY2h1bmtzID0gMFxuICoqLyJdLCJzb3VyY2VSb290IjoiIn0=");
/* 2 */
/***/ function(module, exports) {
    eval("function header(){\r\n  document.write('hello header');\r\n}//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vZDovd2VicGFjay9zcmMvanMvY29tbW9uL2hlYWRlci5qcz85MDZlIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FBQ0E7QUFDQSIsImZpbGUiOiIyLmpzIiwic291cmNlc0NvbnRlbnQiOlsiZnVuY3Rpb24gaGVhZGVyKCl7XHJcbiAgZG9jdW1lbnQud3JpdGUoJ2hlbGxvIGhlYWRlcicpO1xyXG59XG5cblxuLyoqKioqKioqKioqKioqKioqXG4gKiogV0VCUEFDSyBGT09URVJcbiAqKiBkOi93ZWJwYWNrL3NyYy9qcy9jb21tb24vaGVhZGVyLmpzXG4gKiogbW9kdWxlIGlkID0gMlxuICoqIG1vZHVsZSBjaHVua3MgPSAwXG4gKiovIl0sInNvdXJjZVJvb3QiOiIifQ==");
/***/ }
4. cheap-source-map

A SourceMap without column-mappings. SourceMaps from loaders are not used

可以設(shè)斷點(diǎn)調(diào)試，不顯示列信息，生成相應(yīng)的.Map文件，可參考source-map，不包含 loader 的 sourcemap

代碼示例
/* 1 */
/***/ function(module, exports, __webpack_require__) {
    __webpack_require__(2);
    function page1(){
      document.write('hello page1');
    }
/* 2 */
/***/ function(module, exports) {
    function header(){
      document.write('hello header');
    }
/***/ }
//# sourceMappingURL=bundle.js.map
5.cheap-module-source-map

A SourceMap without column-mappings. SourceMaps from loaders are simplified to a single mapping per line.
不包含列信息，同時(shí) loader 的 sourcemap 也被簡(jiǎn)化為只包含對(duì)應(yīng)行的。最終的 sourcemap 只有一份，它是 webpack 對(duì) loader 生成的 sourcemap 進(jìn)行簡(jiǎn)化，然后再次生成的。

參考cheap-source-map

6.cheap-module-eval-source-map

A SourceMap is added as DataUrl to the JavaScript file.

可以設(shè)斷點(diǎn)調(diào)試，不顯示列信息，并在合并后的代碼尾部以base64加入map信息

代碼示例
/* 1 */
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__(2);
    function page1(){
      document.write('hello page1');     
    }   
    page1();    
/***/ },
/* 2 */
/***/ function(module, exports) {
    function header(){
      document.write('hello header');
    }
/***/ }
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vd2VicGFjay9ib290c3RyYXAgZTE1NTRhMmQzZDg1ZDEyYTdjNWIiLCJ3ZWJwYWNrOi8vLy4vc3JjL2pzL3BhZ2UxL2luZGV4LmpzIiwid2VicGFjazovLy8uL3NyYy9qcy9jb21tb24vaGVhZGVyLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQTtBQUNBOztBQUVBO0FBQ0E7O0FBRUE7QUFDQTtBQUNBOztBQUVBO0FBQ0E7QUFDQSx1QkFBZTtBQUNmO0FBQ0E7QUFDQTs7QUFFQTtBQUNBOztBQUVBO0FBQ0E7O0FBRUE7QUFDQTtBQUNBOzs7QUFHQTtBQUNBOztBQUVBO0FBQ0E7O0FBRUE7QUFD
7.hidden-source-map

Same as source-map but doesn’t add a reference comment to the bundle.

跟source-map 一樣，只不過(guò)不在打包后的文件中加入注釋?zhuān)瑪帱c(diǎn)要在打包好的js中加

代碼示例
/* 1 */
/***/ function(module, exports, __webpack_require__) {
    __webpack_require__(2);
    function page1(){
      document.write('hello page1');
    page1();
/***/ },
/* 2 */
/***/ function(module, exports) {
    function header(){
      document.write('hello header');
    }
/***/ }
webpack devtool調(diào)試模式不單單只支持這幾種，還可以自己組合

Combinations are possible. hidden, inline, eval and pragma style are exclusive.

例如：cheap-module-eval-source-map

據(jù)說(shuō) cheap-module-eval-source-map 絕大多數(shù)情況下都會(huì)是最好的選擇，這也是下版本 webpack 的默認(rèn)選項(xiàng)。

但是親測(cè)在chrome下不能打斷點(diǎn)

QQ截圖20161028173032.png

來(lái)自官網(wǎng)的對(duì)比圖

rr.png

先寫(xiě)到這，改日再完善

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容