Webpack 2 非内联源映射未在 chrome 中显示答案

【问题标题】：Webpack 2 non-inline sourcemaps not showing up in chromeWebpack 2 非内联源映射未在 chrome 中显示
【发布时间】：2017-08-25 03:51:14
【问题描述】：

我正在尝试升级到 Webpack 2。

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

但是当我在 Chrome 中打开页面时，我没有得到任何源地图信息：

如您所见，通常用于存放源地图信息的 webpack:// 文件夹已丢失。

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

但是，当我使用 devtool: "inline-source-source-map 时，它可以工作。但这会将源映射添加到我的 javascript 包文件中。使它成为 13 兆！（太大了，不能这样离开。）

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

我正在运行 Webpack 2.3.2。

【问题讨论】：

标签： javascript google-chrome webpack webpack-2 source-maps

【解决方案1】：

一般来说，source maps 和 webpack 2 似乎存在问题。对于我的项目，我需要一个 source maps 规则、SourceMapDevToolPlugin 和 devtool 选项“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',

【讨论】：

如果没问题，请勾上“已回答”。