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