Switch webpack source map depending on dev / production mode

Question

I want to know how to instruct my webpack config to run a different source map for development and production modes.

As it is I am just commenting out the one I don't want, which is obviously pretty inconvenient, I would like this decision to be taken dynamically depending on the npm script that I am running - production server, or webpack dev server.

I already have a variable which corresponds to development mode (const debug), but I'm not sure how to use this in my config to determine a different source map.

Here's my current config...

Webpack.config.js

const debug = process.env.NODE_ENV !== "production"; 

 const webpack = require('webpack'); 
 const path = require('path'); 

 module.exports = { 
     //  devtool: 'eval-source-map',  
     devtool: 'source-map', 
     entry: path.join(__dirname, 'public', 'app-client.js'), 
     devServer: { 
       inline: true, 
       port: 3333, 
       contentBase: "public/static/", 
       historyApiFallback: { 
         index: '/index-static.html' 
       } 
     }, 
     output: { 
       path: path.join(__dirname, 'public', 'static', 'js'), 
       publicPath: "/js/", 
       filename: 'bundle.js' 
     }, 
     module: { 
         loaders: [ 
             { 
                test: path.join(__dirname, 'public'), 
                loader: ['babel-loader'], 
                query: { 
                  presets: debug ? ['react', 'es2015', 'react-hmre', 'stage-2'] : ['react', 'es2015', 'stage-2'] 
                } 
             }, 
             { 
                test: /\.(jpe?g|png|gif|svg)$/i, 
                loaders: [ 
                   'file?hash=sha512&digest=hex&name=[hash].[ext]', 
                   'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false' 
                ] 
             } 
          ] 
     }, 
     plugins: debug ? [] : [ 
       new webpack.DefinePlugin({ 
         'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 
       }), 
       new webpack.optimize.DedupePlugin(), 
       new webpack.optimize.OccurenceOrderPlugin(), 
       new webpack.optimize.UglifyJsPlugin({ 
         compress: { warnings: false }, 
         mangle: true, 
         sourcemap: false, 
         beautify: false, 
         dead_code: true 
       }), 
    ] 
 }

simon04 simon04 · Accepted Answer · 2017-01-20T09:52:50

process.env.NODE_ENV in webpack.config.js is set only if you provide the environment variable NODE_ENV when invoking webpack, e.g. using NODE_ENV webpack in your package.json. If you need to support Windows as well, use the env-variable package.

See also the the guide on building for production for details and other approaches.

Switch webpack source map depending on dev / production mode

1 Answers