如何为 WebPack 创建源映射？

我现在的webpack.config file

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 https://webpack.github.io/docs/configuration.html并发现以下内容：

output.sourceMapFilename

[file] 被 JavaScript 文件的文件名替换。

[id] 被块的 id 替换。

[hash] 被编译的哈希值替换。

如您所见，我已在上面添加了它，但是当我的 webpack watch 运行时，我没有看到地图文件？

这是怎么做到的？

这里有两个选项：

使用 CLI发展捷径 https://webpack.github.io/docs/cli.html#development-shortcut-d和你的--watch option:

webpack -d --watch

或使用配置devtool https://webpack.github.io/docs/configuration.html#devtool选项在你的webpack.config.js:

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" }
        ]
    },
};