javascript - 一行中的 webpack javascript

Question

我正在使用 Webpack 2.4 运行 Angular 4 项目。

由于某些原因，一些第三方Javascript插件文件在编译后被修改，在浏览器的调试器中显示为很长的一行字符串:

这非常不方便，因为我无法使用 Chrome/FF 调试器，因为我无法在其中设置任何断点。

根据本网站和许多其他网站上已经发布的一些问题，我通过执行 ng eject

提取了 webpack.config.js 文件

导入 js 文件的部分如下所示:

{
    ...        
    "scripts": [
        ...
        "script-loader!./node_modules/handsontable-pro/dist/handsontable.full.js",
        ...
    ],
    "styles": [
        ...
    ]
},
"output": {
    "path": path.join(process.cwd(), "dist"),
    "filename": "[name].bundle.js",
    "chunkFilename": "[id].chunk.js"
}

文件 handsontable.full.js 在我的项目文件夹中看起来不像那个。它似乎很有结构。它似乎在构建和提供应用程序时进行了某种修改。

更令人费解的是，node_modules文件夹下的很多其他文件并没有出现同样的问题。

现在，我尝试按照许多论坛中的建议调整 webpack.config.js，特别是 SourceMapDevToolPlugin，但运气不佳。

所以，这里出现了几个问题:

1. 这里发生了什么？转换后的文件似乎不是压缩文件，也不是散列文件...它是什么？
2. 如何防止这种情况发生，以便我可以在该文件中设置断点并使用浏览器的调试器进行跟踪、var inspect 等。

Answer 1

检查 Webpack 配置对象中的 devtool: 属性。如果它设置为 eval，cheap-eval-source-map(或类似的东西，不要记住所有 eval 选项)，请尝试将其更改为 source-map 或 cheap-source-map。

这里有完整的选项列表:https://webpack.js.org/configuration/devtool/