Admittedly, I have basic understanding of source maps and webpack. It is my understanding that if I set the devtools correctly in my webpack.config.js file, I should get source map files that map to original code.

I'm using the following config file and I'm not getting any source map files. Any idea why?

var IS_DEV = false;

var webpack = require('webpack');
var path = require("path");

// Define plugins needed for production and dev cases
var _pluginsDev = [
    new webpack.ProvidePlugin({
        'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
        moment: 'moment',
        ps: 'perfect-scrollbar'
    }),

];
var _pluginsProd = [
    new webpack.ProvidePlugin({
        'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
        moment: 'moment',
        ps: 'perfect-scrollbar'
    }),
    new webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': JSON.stringify('production')
        }
    }),
    new webpack.optimize.UglifyJsPlugin({
        minimize: true,
        press: true,
        output: { ments: false }
    })
];

var _devtool = IS_DEV ? 'eval' : 'cheap-module-source-map';
var _plugins = IS_DEV ? _pluginsDev : _pluginsProd;
var _fileName = IS_DEV ? "./build/[name]-bundle.js" : "./dist/[name]-bundle.js";

var _bundles = {
    login: './ponents/login/login.jsx',
    home: './ponents/home/home.jsx'
};

module.exports = {
    entry: _bundles,
    output: {
        path: path.resolve(__dirname, "wwwroot"),
        publicPath: "/",
        filename: _fileName
    },
    devtool: _devtool,
    plugins: _plugins,
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_ponents)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['es2015', 'stage-2', 'stage-0', 'react']
                    }
                }
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    }
}

Admittedly, I have basic understanding of source maps and webpack. It is my understanding that if I set the devtools correctly in my webpack.config.js file, I should get source map files that map to original code.

I'm using the following config file and I'm not getting any source map files. Any idea why?

var IS_DEV = false;

var webpack = require('webpack');
var path = require("path");

// Define plugins needed for production and dev cases
var _pluginsDev = [
    new webpack.ProvidePlugin({
        'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
        moment: 'moment',
        ps: 'perfect-scrollbar'
    }),

];
var _pluginsProd = [
    new webpack.ProvidePlugin({
        'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
        moment: 'moment',
        ps: 'perfect-scrollbar'
    }),
    new webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': JSON.stringify('production')
        }
    }),
    new webpack.optimize.UglifyJsPlugin({
        minimize: true,
        press: true,
        output: { ments: false }
    })
];

var _devtool = IS_DEV ? 'eval' : 'cheap-module-source-map';
var _plugins = IS_DEV ? _pluginsDev : _pluginsProd;
var _fileName = IS_DEV ? "./build/[name]-bundle.js" : "./dist/[name]-bundle.js";

var _bundles = {
    login: './ponents/login/login.jsx',
    home: './ponents/home/home.jsx'
};

module.exports = {
    entry: _bundles,
    output: {
        path: path.resolve(__dirname, "wwwroot"),
        publicPath: "/",
        filename: _fileName
    },
    devtool: _devtool,
    plugins: _plugins,
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_ponents)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['es2015', 'stage-2', 'stage-0', 'react']
                    }
                }
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    }
}

• javascript
• webpack
• webpack-2
• source-maps

• What version of webpack are you using? – Cody Geisler Commented Dec 10, 2017 at 21:00
• webpack -v is giving me 2.7.0 – Sam Commented Dec 10, 2017 at 21:09
• 3 Per the docs, not sure if it will fix your problem, When using the uglifyjs-webpack-plugin you must provide the sourceMap: true option to enable SourceMap support. – Cody Geisler Commented Dec 10, 2017 at 21:22
• 2 You just beat me to it. You'd better post that as an answer to get your bounty. It'll fix it - I just reproduced and that was the fix I discovered seconds before I saw your ment on here. – Kirk Larkin Commented Dec 10, 2017 at 21:23

1 Answer 1

According to the documentation,

When using the uglifyjs-webpack-plugin you must provide the sourceMap: true option to enable SourceMap support.