webpack 不生成源地图

Question

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"
}

包.json

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

索引.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 Chromeya中成功使用（源地图！）

• Running npm run dev seems to compile fine and serves my webpage successfully but the dist directory doesn’t contain bundle.js or bundle.js.map - but when I转到 localhost:8080 它仍然有效（没有源映射）。

原文由 Carpetfizz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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 并按预期生成源映射文件。

原文由 Rob Johansen 发布，翻译遵循 CC BY-SA 3.0 许可协议