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

• 运行npm run dev似乎编译正常并成功为我的网页提供服务，但dist目录不包含bundle.js或bundle.js.map - 但是当我转到localhost:8080它仍然有效（没有源映射）。

Answer 1

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

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

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

Answer 2

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

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

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

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

Answer 3

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

将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].*'),
    }),