webpack之source map

时间 2019-11-30

标签 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员工的任性之源
• 算法总结-滑动窗口