我正在尝试升级到 Webpack 2。
我已将 devtool: "source-map"
添加到我的 webpack.config.js 文件中。当我构建时,我得到了一个 bundle.js.map 文件,就像我期望的那样。
但是当我在 Chrome 中打开页面时,我没有获得任何源映射信息:
如您所见,通常用于源映射信息的 webpack://
文件夹丢失了。
但是 chrome 显示“检测到 Source Map”。 (点击它没有帮助。)显然它知道我有源 map ......(按 ctrl+p 只显示捆绑的下载文件,而不是我的源文件。)我认为 Chrome 应该自动去请求我的源映射文件并使用它?
但是,当我使用 devtool: "inline-source-source-map
时,它就可以工作了。但这会将源映射添加到我的 javascript 包文件中。使其达到 13 兆!(太大了就这样离开。)
如何让 Chrome 正确加载我的 bundle.js.map 文件?
我正在运行 Webpack 2.3.2。
最佳答案
通常,源映射和 webpack 2 似乎存在问题。对于我的项目,我需要一个源映射规则、SourceMapDevToolPlugin 和开发工具选项“eval-source-map”:
模块: {
rules:
[
...
{
use: ['source-map-loader'],
test: /\.js$/,
enforce: 'pre',
exclude: [
// these packages have problems with their sourcemaps
'/node_modules/ajv'
]
}
]
},
...
plugins: [
...
new webpack.SourceMapDevToolPlugin({ compress: false,
sourceMap: true,
mangle: false,
beautify: true,
module: true,
filename: '[file].map',
columns: false })
],
devtool: 'eval-source-map',
关于javascript - Webpack 2 非内联源 map 未在 chrome 中显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43131111/