javascript - webpack 不生成源 map

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

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 时它仍然有效(没有源映射)。

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