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

时间:2017-03-31 01:52:38

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

我正在尝试升级到Webpack 2。

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

但是当我在Chrome中打开页面时,我没有获得任何源地图信息:

missing-source-map-info

如您所见,缺少通常存在源地图信息的webpack://文件夹。

但是chrome说“检测到源地图”。 (点击它没有帮助。)显然它有点知道我有源地图...(按ctrl + p只显示捆绑的下载文件,而不是我的源文件。)我认为Chrome应该只是自动错误请求我的源地图文件并使用它?

然而,当我使用devtool: "inline-source-source-map时,它可以工作。但是这会将源映射添加到我的javascript包文件中。让它成为13兆! (方式太大了,不能那样离开。)

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

我正在运行Webpack 2.3.2。

1 个答案:

答案 0 :(得分: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',