如何为WebPack创建源映射？

Question

我目前的webpack.config文件

module.exports = {
    entry: "./entry.js",
    output: {
        devtoolLineToLine: true,
        sourceMapFilename: "./bundle.js.map",
        pathinfo: true,
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    },
};

我正在阅读这里的内容https://webpack.github.io/docs/configuration.html，并找到以下内容： output.sourceMapFilename

[file]将被替换为JavaScript文件的文件名。 [id]将被替换为块的ID。 [hash]将被替换为编译的哈希值。

我已经像你看到的那样添加了它，但当我的webpack watch运行时，我没有看到地图文件？

这是如何完成的？

- Leon Gaban

Answer 1

这里有两个选择：

使用CLI开发快捷方式以及--watch选项：

webpack -d --watch

或者在你的 webpack.config.js 中使用配置选项 devtool：

module.exports = {
    devtool: "source-map",
    entry: "./entry.js",
    output: {
        devtoolLineToLine: true,
        sourceMapFilename: "./bundle.js.map",
        pathinfo: true,
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    },
};

- dreyescat

---

谢谢！这个命令 webpack -d --watch 起作用了，配置工具在我使用这个命令之前没有做任何事情。 - Leon Gaban

@LeonGaban -d选项只是一个快捷方式，其中包括devtool选项。配置选项应该与webpack --watch一起工作。 - dreyescat

我认为这不是非此即彼的情况。你需要同时拥有“-d”命令参数和在webpack.config.js中包含devtool声明以及sourceMapFilename定义。 - Alex Volkov

不确定出了什么问题，但是建议中的任何内容都对我无效。我怀疑这可能是因为将代码分成块（例如main.js、vendor.js）的缘故。 - Roland Jegorov