webpack之source map

Posted 2020-10-13 HelloHello233

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>