Setting up webpack - Enabling sourcemaps - No source maps generated

[alejandronanez]

Hi there, I'm having issues generating my sourcemaps. I followed the instructions on the book and followed the documentation on webpack's site and I can't make them to work.

I do have sourcemaps enabled on my browser (Chrome).

For example if I console.log a message and I inspect it on the dev tools I got something like:

/***/ },
/* 76 */
/***/ function(module, exports, __webpack_require__) {

    var component = __webpack_require__(77);
    var app = document.createElement('div');
    __webpack_require__(78);

    console.log('something');

    document.body.appendChild(app);

    app.appendChild(component());

...
...

Also here's my webpack.config.js

if (TARGET === 'start' || !TARGET) {
    const config = {
        devServer: {
            contentBase: PATHS.build,
            devtool: 'eval-source-map',
            // API fallback so HTML5 API based routing works. Good default.
            historyApiFallback: true,
            hot: true,
            inline: true,
            progress: true,
            // Display only errors
            stats: 'errors-only',
            // Parse host and port from env -> easy costumization
            host: process.env.HOST,
            port: process.env.PORT || 8000
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin()
        ]
    };

    module.exports = merge(common, config);
}

Basically I'm getting the same result with/without the devtool option.

Thanks.

[bebraw]

devtool should be at the root level of configuration. Try something like this:

const config = {
  devtool: 'eval-source-map',
  devServer: {...},
  plugins: [...]
};

...

I hope this helps!

[alejandronanez]

Sweet @bebraw. Silly mistake from my side.

Thanks!!!

Great book BTW.

[bebraw]

No probs. I have a little plan on how to improve the ux of webpack to avoid these kind of issues. But we'll see. :smile: