CODEWITHSUNDEEP
javascriptgoogle-chromewebpackwebpack-2source-maps
Vaccano
Vaccano

Reputation: 82507

Webpack 2 non-inline sourcemaps not showing up in chrome

I am trying to upgrade to Webpack 2.

I have added devtool: "source-map" to my webpack.config.js file. When I build I get a bundle.js.map file created just like I would expect.

But when I open the page up in Chrome I don't get any source map information:

missing-source-map-info

As you can see, the webpack:// folder that is usually there for source map info is missing.

But chrome says "Source Map detected". (Clicking on that does not help.) Clearly it kind of knows that I have source maps... (Pressing ctrl+p just shows the bundled download files, not my source files.) Am I wrong in thinking that Chrome should just automatically go request my source map file and use it?

However when I used devtool: "inline-source-source-map then it works. But this adds the source maps to my javascript bundle file. Making it 13 megs! (Way too big to leave like that.)

How can I get Chrome to correctly load my bundle.js.map file?

I am running Webpack 2.3.2.

Upvotes: 2

Views: 543

Answers (1)

Trantor
Trantor

Reputation: 766

Generally, there seem to be problems with source maps and webpack 2. For my project, I needed a rule for source maps, the SourceMapDevToolPlugin, and the devtool option "eval-source-map":

module: {

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

Upvotes: 1

Related Questions