指向缩小包的 Webpack 源映射 [英] Webpack source maps pointing to minified bundle

问题描述

我正在为现有项目设置 Webpack 构建过程，但在使用源映射时遇到了一些问题.

我正在使用 devtool: 'eval-source-map',.如果浏览器发生错误，堆栈跟踪中的每个文件/行号都指向一个在 Webpack 包中压缩为一行的文件.

例如，堆栈跟踪的第一行可能如下所示:

<块引用>

未捕获的错误:foo

at child.initialize(在 (

当我点击 main.js:2166 链接时，浏览器将我导航到捆绑代码.

当我刷新 Chrome 浏览器时，我看到一个指向原始文件layout.js"的链接.

单击此链接将带我进入未捆绑的代码.

如果我使用带有 devtool: 'eval-source-map' 的 Webpack 构建网页，我会得到与使用 Webpack-dev-server 相同的结果.您可以检查构建的 js 文件是否有嵌入的 sourceMap.

I'm setting up a Webpack build process for an existing project and have been running into some issues with source maps.

I am using devtool: 'eval-source-map',. If an error happens in the browser, every file / line number in the stack trace points to a file condensed into a single line in the Webpack bundle.

For example, a first line of a stack trace might look like this:

Uncaught Error: foo

at child.initialize (eval at (http://127.0.0.1:8000/js/dist/index.js:1270:1), :45:10)

Clicking on the file name / line number brings me in the bundle to the line where the file where the error happened gets "included" by Webpack. Looks like this:

/* 223 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
// Below is the line it points to, and it goes on to have the entire file on the same line
eval("/* WEBPACK VAR INJECTION */(function(Backbone, $, _) { ... 

However the entire file content is on that single line, so this is completely useless.

This happens even if I trim my Webpack config down to just this:

var path = require('path'),
    webpack = require('webpack');

module.exports = {
    entry: {
        'indexhead': './static/js/main.js',
        'accounthead': './static/js/accountManager.js'
    },
    output: {
        path: path.join(__dirname, 'static/js/dist'),
        filename: '[name].js'
    },
    devtool: 'eval-source-map',
};

And happens for other types of development source map types outlined here. If instead I use the production setting of devtool: source-map, I still get pointed to a giant bundle file with every single script in there, but at least the lines are "unfurled" and I get to see where the error happened.

How can I fix this, or at least troubleshoot further?

解决方案

I did try to reproduce the problem and I found this. Maybe this is not where you looking for.

After bundling the code with webpack the code is throw a error in the Chrome console.

When I click on the main.js:2166 link, the browser is navigate me to the bundled code.

When I refresh the Chrome browser I see a link to the orginal file 'layout.js'.

Clicking on this link will bring me to the unbundled code.

If I build the webpage with Webpack with devtool: 'eval-source-map' I get the same result as with Webpack-dev-server. You can check if the build js files have an embedded sourceMap.

这篇关于指向缩小包的 Webpack 源映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！