如何为WebPack创建源映射?

时间:2015-11-18 17:14:00

标签: javascript module webpack source-maps

我当前的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手表运行时,我看不到地图文件?

这是怎么做到的?

1 个答案:

答案 0 :(得分:10)

这里有两个选项:

使用CLI development shortcut以及--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" }
        ]
    },
};