如何为 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 并发现以下内容:
output.sourceMapFilename
[file] is replaced by the filename of the JavaScript file.
[id] is replaced by the id of the chunk.
[hash] is replaced by the hash of the compilation.
如您所见,我已经在上面添加了它,但是当我的 webpack watch 运行时,我没有看到地图文件?
这是怎么做到的?
这里有两个选项:
使用 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" }
]
},
};
我当前的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] is replaced by the filename of the JavaScript file.
[id] is replaced by the id of the chunk.
[hash] is replaced by the hash of the compilation.
如您所见,我已经在上面添加了它,但是当我的 webpack watch 运行时,我没有看到地图文件?
这是怎么做到的?
这里有两个选项:
使用 CLI development shortcut 以及您的 --watch
选项:
webpack -d --watch
或在 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" }
]
},
};