Question

有人告诉我，您必须配置webpack才能使用源映射。但是我发现只要运行即可

webpack -d -w

我的bundles.js（输出文件）已进行源映射！

以前，我被告知您必须使用此处显示的devtool参数...但是我根本不使用它。源映射似乎可以“开箱即用”

https://webpack.js.org/configuration/devtool/

const exportFunc = ( env ) => {

return {

// note no use of devtool parameter

// entry point
entry: `${SRC_DIR}/index.jsx`,

// output file
output: {
  filename: 'bundle.js',
  path: DIST_DIR
},

好奇的是，我可以找到说明这是预期行为以及如何修改行为的文档。

更重要的是，我对为什么生产模式中没有源映射感到困惑？有某种开销吗？

Answer 1

您将不得不深入研究文档，以了解还可以从命令行（不仅是配置文件）设置devtool参数。

从这里：

https://webpack.js.org/api/cli/#shortcuts

您可以看到

devtool 设置为

cheap-module-eval-source-map

此外，您还可以使用以下参考为devtool参数选择不同的值：

https://webpack.js.org/configuration/devtool/

Answer 2

通常，就时间和计算资源而言，生成源地图被认为是昂贵的。此外，按常规，生产环境中的源地图不会有帮助：

对于开发人员而言，开发人员不必在生产环境中调试软件，而应使用其开发/登台实例；
第二，在生产环境中公开源地图也可能会公开不适合应用程序最终用户的信息（我知道这有点夸张，但请考虑代码/算法解决方案）。
第三，应尽可能提高产品的性能。为此，在生产环境中将源地图和源文件一起发送到客户端（此处是浏览器）将导致不必要的带宽使用和网络往返；

最后，您要求提供文档（关于为什么Webpack CLI使用-d标志生成源映射，这里是：

-d shortcut for --debug --devtool eval-cheap-module-source-map

（在终端中输入webpack -d --help）

如何使用webpack配置源映射？

2 个答案: