一直對(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)潔性
代碼示例
//打包后的部分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)
來(lái)自官網(wǎng)的對(duì)比圖
先寫(xiě)到這乐疆，改日再完善
