webpack之source map
阿新 • • 發佈：2017-11-05
mil 例子 extc 嘗試 -1 fun document filename 混亂
先來一個webpack小例子，項目結構如下：
// greeter.js module.exports = function() { var greet = document.createElement(‘div‘); greet.textContent = "Hi there and greetings!"; return greet; }; // main.js const greeter = require(‘./Greeter.js‘); document.querySelector("#root").appendChild(greeter()); // webpack.config.jsmodule.exports = { // devtool: ‘eval-source-map‘, entry: __dirname + "/main.js", output: { path: __dirname + "/dist", filename: "bundle.js" } } // index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body id="root"></body> <script src="dist/bundle.js"></script> </html>
運行結果：
頁面上正常顯示：“Hi there and greetings!”。
以上的例子很簡單，可以直接在bundle.js中打斷點進行調試。但是對於復雜的webpack程序，模塊很多，如果全都在bundle中打斷點進行調試，會很混亂，那該如何方便調試模塊裏面的邏輯呢？答案是使用webpack的source map選項。
在以上的配置文件中打開註釋：
// devtool: ‘eval-source-map‘,
然後重新運行。然後打開瀏覽器的調試窗口，發現多了些東西：
雙擊這些文件，可以很方便地對不同js文件中的代碼進行調試。
以上僅僅用到了source map的一個選項，其他的可以在這裏進行參考和嘗試
webpack之source map