having trouble with webpack generating sourmaps when using dev server

Question

I am not sure if webpack should be generating a sourcemap with the given config below.

If yes, where should I find it ?

I cannot find it from the browser debug window (see picture). Chrome says that it detects source maps, but I cannot find them. What is the problem ?

public directory is empty, so where could it be ?

Also, Where can I find the generated bundle.js ? It is also not in public (which I created manually - hoping that it will solve the problem).

Any ideas ?

All the source can be found here on github.

Jozsefs-MBP:react-webpack-babel joco$ npm start

> react-webpack-babel@0.0.3 start /Users/joco/dev/react/redux/egghead-tutorial/react-webpack-babel
> webpack-dev-server --progress --profile --colors

 70% 1/1 build modules http://127.0.0.1:8888/
webpack result is served from /
content is served from ./public
404s will fallback to /index.html
4826ms build modules
9ms seal
7ms optimize
13ms hashing
45ms create chunk assets
15ms additional chunk assets
1723ms optimize chunk assets
117ms optimize assets
36ms emit
^C
Jozsefs-MBP:react-webpack-babel joco$ npm start

> react-webpack-babel@0.0.3 start /Users/joco/dev/react/redux/egghead-tutorial/react-webpack-babel
> webpack-dev-server --progress --profile --colors

 70% 1/1 build modules http://127.0.0.1:8888/
webpack result is served from /
content is served from ./public
404s will fallback to /index.html
4747ms build modules
9ms seal
7ms optimize
13ms hashing
40ms create chunk assets
16ms additional chunk assets
93ms optimize chunk assets
126ms optimize assets
29ms emit
^C
Jozsefs-MBP:react-webpack-babel joco$ ls
LICENSE                         npm-debug.log                   src
README.md                       package.json                    webpack.config.js
flow-typed                      postcss.config.js               webpack.loaders.js
node_modules                    public                          webpack.production.config.js
Jozsefs-MBP:react-webpack-babel joco$ ls public/
fasz
Jozsefs-MBP:react-webpack-babel joco$ cat webpack.config.js
"use strict";
var webpack = require('webpack');
var path = require('path');
var loaders = require('./webpack.loaders');
var HtmlWebpackPlugin = require('html-webpack-plugin');

const HOST = process.env.HOST || "127.0.0.1";
const PORT = process.env.PORT || "8888";

// global css
loaders.push({
        test: /[\/\\](node_modules|global)[\/\\].*\.css$/,
        loaders: [
                'style?sourceMap',
                'css'
        ]
});
// local scss modules
loaders.push({
        test: /[\/\\]src[\/\\].*\.scss/,
        exclude: /(node_modules|bower_components|public)/,
        loaders: [
                'style?sourceMap',
                'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
                'postcss',
                'sass'
        ]
});

// local css modules
loaders.push({
        test: /[\/\\]src[\/\\].*\.css/,
        exclude: /(node_modules|bower_components|public)/,
        loaders: [
                'style?sourceMap',
                'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
        ]
});

module.exports = {
        entry: [
                `webpack-dev-server/client?http://${HOST}:${PORT}`,
                `webpack/hot/only-dev-server`,
                `./src/index.jsx` // Your appʼs entry point
        ],
        devtool: process.env.WEBPACK_DEVTOOL || 'cheap-module-source-map',
        output: {
                path: path.join(__dirname, 'public'),
                filename: 'bundle.js'
        },
        resolve: {
                extensions: ['', '.js', '.jsx']
        },
        module: {
                loaders
        },
        devServer: {
                contentBase: "./public",
                // do not print bundle build stats
                noInfo: true,
                // enable HMR
                hot: true,
                // embed the webpack-dev-server runtime into the bundle
                inline: true,
                // serve index.html in place of 404 responses to allow HTML5 history
                historyApiFallback: true,
                port: PORT,
                host: HOST
        },
        plugins: [
                new webpack.NoErrorsPlugin(),
                new webpack.HotModuleReplacementPlugin(),
                new HtmlWebpackPlugin({
                        template: './src/template.html'
                }),
        ]
};
Jozsefs-MBP:react-webpack-babel joco$

Answer 1

Try adding this into webpack's options:

devtool: 'source-map'

it works for me. while common value '#eval-source-map' does not (in web-server particularly).