我正在尝试升级到Webpack 2。
我已将devtool: "source-map"
添加到 webpack.config.js 文件中。当我构建时,我得到了一个像我期望的那样创建的 bundle.js.map 文件。
但是当我在Chrome中打开页面时,我没有获得任何源地图信息:
如您所见,缺少通常存在源地图信息的webpack://
文件夹。
但是chrome说“检测到源地图”。 (点击它没有帮助。)显然它有点知道我有源地图...(按ctrl + p只显示捆绑的下载文件,而不是我的源文件。)我认为Chrome应该只是自动错误请求我的源地图文件并使用它?
然而,当我使用devtool: "inline-source-source-map
时,它可以工作。但是这会将源映射添加到我的javascript包文件中。让它成为13兆! (方式太大了,不能那样离开。)
如何让Chrome正确加载我的bundle.js.map文件?
我正在运行Webpack 2.3.2。
答案 0 :(得分:1)
通常,源映射和webpack 2似乎存在问题。对于我的项目,我需要一个源映射规则,SourceMapDevToolPlugin和devtool选项&#34; eval-source-map&#34;:< / p>
模块: {
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',