javascript - Webpack 2 非内联源 map 未在 chrome 中显示

Question

我正在尝试升级到 Webpack 2。

我已将 devtool: "source-map" 添加到我的 webpack.config.js 文件中。当我构建时，我得到了一个 bundle.js.map 文件，就像我期望的那样。

但是当我在 Chrome 中打开页面时，我没有获得任何源映射信息:

如您所见，通常用于源映射信息的 webpack:// 文件夹丢失了。

但是 chrome 显示“检测到 Source Map”。 (点击它没有帮助。)显然它知道我有源 map ......(按 ctrl+p 只显示捆绑的下载文件，而不是我的源文件。)我认为 Chrome 应该自动去请求我的源映射文件并使用它？

但是，当我使用 devtool: "inline-source-source-map 时，它就可以工作了。但这会将源映射添加到我的 javascript 包文件中。使其达到 13 兆!(太大了就这样离开。)

如何让 Chrome 正确加载我的 bundle.js.map 文件？

我正在运行 Webpack 2.3.2。

Answer 1

通常，源映射和 webpack 2 似乎存在问题。对于我的项目，我需要一个源映射规则、SourceMapDevToolPlugin 和开发工具选项“eval-source-map”:

模块: {

   rules:
        [
            ...
            {
                use: ['source-map-loader'],
                test: /\.js$/,
                enforce: 'pre',
                exclude: [
                    // these packages have problems with their sourcemaps
                    '/node_modules/ajv'
                ]
            }
        ]

    },

...

plugins: [
...
    new webpack.SourceMapDevToolPlugin({ compress: false,
                                         sourceMap: true,
                                         mangle: false,
                                         beautify: true,
                                         module: true,
                                         filename: '[file].map',
                                         columns: false      })
         ],

devtool: 'eval-source-map',