Question

我正在尝试升级到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。

Answer 1

通常，源映射和webpack 2似乎存在问题。对于我的项目，我需要一个源映射规则，SourceMapDevToolPlugin和devtool选项＆＃34; eval-source-map＆＃34;：< / p>

模块： {

   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',

Webpack 2非内联源图表未显示在chrome

1 个答案: