webpack之source map

先来一个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.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>

运行结果：

页面上正常显示：“Hi there and greetings!”。

以上的例子很简单，可以直接在bundle.js中打断点进行调试。但是对于复杂的webpack程序，模块很多，如果全都在bundle中打断点进行调试，会很混乱，那该如何方便调试模块里面的逻辑呢？答案是使用webpack的source map选项。

在以上的配置文件中打开注释：

    // devtool: 'eval-source-map',

然后重新运行。然后打开浏览器的调试窗口，发现多了些东西：

双击这些文件，可以很方便地对不同js文件中的代码进行调试。

以上仅仅用到了source map的一个选项，其他的可以在这里进行参考和尝试