webpack 不生成源映射答案

【问题标题】：webpack not generating source mapswebpack 不生成源映射
【发布时间】：2017-06-19 18:40:07
【问题描述】：

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        hot: true,
        contentBase: path.join(__dirname, 'dist'),
    },
    devtool: "source-map"
}

package.json

  "scripts": {
    "build": "webpack --progress --colors",
    "dev": "webpack-dev-server -d --watch --progress --colors"
  },

index.js

let h = "hello world"
console.log(h)

我同时运行npm build 和npm run dev，但似乎都没有生成源映射。我检查它们是否出现的方式是我是否可以在 Chrome 开发工具或 Safari 开发工具中看到原始源代码。

感谢您的帮助！

更新 0

运行 npm run build（npm build 不做任何事情）确实会生成 bundle.js.map，我可以在 Google Chrome 中成功使用源地图（耶！）
运行npm run dev 似乎可以正常编译并成功提供我的网页，但dist 目录不包含bundle.js 或bundle.js.map - 但是当我转到localhost:8080 时它仍然有效（没有源地图）。

【问题讨论】：

标签： javascript webpack webpack-dev-server webpack-2

【解决方案1】：

我最近在使用 webpack 3.6.0 时遇到了这个问题。即使我在 webpack.config.js 中有 devtool: 'source-map'，也没有生成源映射文件。

就我而言，问题在于我在命令行上将-d 传递给webpack，这是所有这些的快捷方式（注意第二个选项及其参数）：

--debug --devtool cheap-module-eval-source-map --output-pathinfo

我现在不传递-d，而是传递--debug --output-pathinfo，并按预期生成源映射文件。

【讨论】：

谢谢，它对我有用！这是文档中的快捷方式描述：webpack.js.org/api/cli/#shortcuts

【解决方案2】：

您能在您的dist 文件夹中看到实际的.map 文件吗？尝试将SourceMapDevToolPlugin 添加到您的webpack.config.js 文件中。

new webpack.SourceMapDevToolPlugin({
  filename: "[file].map"
}),

然后重新启动构建过程并在dist 文件夹中检查.map 文件。

【讨论】：

感谢您的回复！所以我添加了这个插件，当我运行webpack 时，它会生成bundle.js.map。在 Chrome 开发工具中，当我转到源并单击 bundle.js 时，它会显示“检测到源映射”，但我不确定在哪里查看我的原始源。此外，当我运行webpack-dev-server 时，这似乎不起作用。任何提示将不胜感激！
有趣的是，只运行webpack（没有插件）并设置devtool: "source-map"也有相同的结果。
在 Chrome DevTools 中转到 Sources，然后在底部有一个云图标，上面写着 web pack://。如果您将鼠标悬停在 src 文件夹中的 app.js 文件上，标签应显示为 app.js(from source map)。你是这种情况吗？
是的，就是这样。如果您看到我对@HerrVoennchen 的回复，如果我只运行webpack 而不是运行webpack-dev-server 时，它似乎生成源映射非常好
@Dan 它对我有用！（仅通过删除devtool: 'source-map'）

【解决方案3】：

在 webpack 聊天中看到您的问题。 :)

将devtool 更改为source-map，然后您就有了源映射。在 Chrome 中，您可以看到像这样的原始源（在那里调试也可以）

编辑：同样在 package.json 中的脚本中，您不需要引用 node_modules 文件夹。只是命令，npm 将在 node_modules/.bin 文件夹中自动显示。

【讨论】：

感谢您的回答！所以我设置了devtool: "source-map"，但它仍然不起作用。在 Chrome 中，在webpack:// 下，我看到了(webpack)、(webpack)-dev-server 和(./~)，但没有看到.。
好的，所以经过更多调试后，我发现npm build 除了npm run build 确实生成bundle.js.map 文件之外没有任何作用。我也可以在 Chrome 中看到它们，谢谢！所以我想我还有几个问题 - .map 文件需要生成还是有内联源映射？为什么cheap-eval-source-map 不起作用？为什么使用webpack-dev-server时不起作用？
sry 对于迟到的答案。也许我们应该比较我们的 webpack 配置和 package.json 脚本。那里一定有问题。这里你可以看看我的。 github.com/HerrVoennchen/dev-templates/tree/master/… 上面的屏幕截图来自运行 webpack-dev-server，如果你查看我的 webpack 配置，没有真正的 dev-server 特定代码。关于源映射，我真的必须阅读可用的不同映射，on创建我的配置我只是选择了最适合我的。忽略我的仓库中的 src 文件夹，它不再匹配配置，我只是存储我的配置

【解决方案4】：

我无法生成源映射，因为我的 output.filename 没有以“.js”结尾。

所以我需要使用“测试”来设置 SourceMapDevToolPlugin

    new webpack.SourceMapDevToolPlugin({
      test: new RegExp('\.[js|css|mjs].*'),
    }),

【讨论】：

谢谢！这也正是我的问题所在。 Webpack 的这种奇怪行为......