How do I get sourcemap files to output to my build folder?

Question

I have a minimal webpack1 config that I've whittled a massive project down to just to reproduce this.

When I run my config with webpack-dev-server it works just fine, except the file is only accessible at localhost:port/bundle.js.map not in my local projects dist folder.

link to repo with instructions: https://github.com/rublev/webpack-nosourcemaps

webpack.config.base.js

module.exports = {
    output: {
        path: path.join(process.cwd(), '/dist'),
        publicPath: '/',
        filename: 'bundle.js'
    },
    resolve: {
        root: path.join(__dirname, ''),
        modulesDirectories: [
            'node_modules',
            'app'
        ],
        extensions: ['', '.html', '.js'] // removing '' makes everything explode
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack-sourcemap',
            template: 'app/index.html'
        })
    ],
    module: {
        loaders: [],
    }
}

webpack.config.production.js

var config = require('./webpack.config.base.js')

config.devtool = 'source-map'

if (process.env.NODE_ENV !== 'test') {
    config.entry = {
        main: path.join(process.cwd(), '/app/') + 'app.js',
        vendor: [
            'react',
            'react-dom'
        ]
    }
}

config.output = {
    path: path.join(process.cwd(), '/dist'),
    pathInfo: true,
    publicPath: '/',
    filename: 'bundle.js'
}

config.module.loaders = config.module.loaders.concat([
    {
        test: /\.js$/,
        loaders: ['babel'],
        exclude: /node_modules/
    }
])

config.plugins = config.plugins.concat([
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(true),
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        filename: 'vendor.js'
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
            warnings: false
        }
    }),
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('production')
        }
    })
])

module.exports = config

Answer 1

You run this code

NODE_ENV=production webpack-dev-server ...

add -d flag like this

NODE_ENV=production webpack-dev-server -d...

Development shortcut -d

Equals to --debug --devtool source-map --output-pathinfo

Answer 2

Add to your production config config.devtool = 'source-map'; for the highest quality production source-map.

Other production options are cheap-source-map , cheap-module-source-map , and nosources-source-map .

And it's good that you already have sourceMap: true set within your UglifyJsPlugin, or else the source-map files wouldn't be generated.

Resource: https://webpack.js.org/configuration/devtool/