如何为WebPack创建源映射？ [英] How to create a source map for WebPack?

问题描述

我当前的 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 并找到以下内容：

I was reading here https://webpack.github.io/docs/configuration.html and found the following:

output.sourceMapFilename

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

[file] is replaced by the filename of the JavaScript file.

[id]被块的id替换。

[id] is replaced by the id of the chunk.

[hash]被哈希替换编译。

[hash] is replaced by the hash of the compilation.

我已经在上面添加了它，但是当我的webpack手表运行时，我看不到地图文件？

I've added it above as you can see, but when my webpack watch runs, I don't see a map file?

这是怎么做到的？

推荐答案

那里这里有两个选项：

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

Using the CLI development shortcut along with your --watch option:

webpack -d --watch

或使用配置 devtool <你的 webpack.config.js中的/ a>选项：

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

这篇关于如何为WebPack创建源映射？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！