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

的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中成功使用源地图（是的！）< / p>

• 正在运行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，而是按预期生成源地图文件。

Answer 2

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

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

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

Answer 3

在网络聊天中看到了你的问题。 ：）

将devtool更改为source-map，然后您拥有源地图。在Chrome中，您可以看到这样的原始来源（调试也有效）

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

Answer 4

我无法生成源映射，因为我的output.filename不以'.js'结尾。

所以我需要使用'test'来设置SourceMapDevToolPlugin

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