webpack之source map
先來一個webpack小例子，項目結構以下：html
// 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.js
module.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>
運行結果：webpack
頁面上正常顯示：「Hi there and greetings!」。web
以上的例子很簡單，能夠直接在bundle.js中打斷點進行調試。可是對於複雜的webpack程序，模塊不少，若是全都在bundle中打斷點進行調試，會很混亂，那該如何方便調試模塊裏面的邏輯呢？答案是使用webpack的source map選項。segmentfault
在以上的配置文件中打開註釋：瀏覽器
// devtool: 'eval-source-map',
而後從新運行。而後打開瀏覽器的調試窗口，發現多了些東西：app
雙擊這些文件，能夠很方便地對不一樣js文件中的代碼進行調試。ui
以上僅僅用到了source map的一個選項，其餘的能夠在這裏進行參考和嘗試spa
相關文章
- 1. webpack -- source-map
- 2. webpack之source-map模式
- 3. webpack學習之路（七）source map
- 4. webpack學習_使用source map
- 5. 【轉】webpack中關於source map的配置
- 6. webpack學習筆記(三) source map
- 7. source map
- 8. [AngualrJS + Webpack] Production Source Maps
- 9. 【javascript】source map
- 10. 配置source-map
- 更多相關文章...
- • Scala Map(映射) - Scala教程
- • RSS
元素 - RSS 教程 - • 互聯網組織的未來：剖析GitHub員工的任性之源
- • 算法總結-滑動窗口
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
