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中成功使用源地图(耶!)

• 运行npm run dev似乎编译正常并成功提供我的网页,但该dist目录不包含bundle.js或bundle.js.map- 但当我去localhost:8080它仍然有效(没有源地图).

Answer 1

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

在我的情况下,问题是我-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

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

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

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