Wechseln Sie die Webpack-Quellkarte abhängig vom Entwicklungs-/Produktionsmodus

Question

Ich möchte wissen, wie ich meine Webpack-Konfiguration anweisen kann, eine andere Quellkarte für Entwicklungs- und Produktionsmodi auszuführen.

Da ich gerade den einen ausdenke, den ich nicht möchte, was offensichtlich ziemlich unpraktisch ist, möchte ich diese Entscheidung dynamisch abhängig von dem npm-Skript, das ich ausführe - Produktionsserver oder Webpack Dev-Server.

Ich habe bereits eine Variable, die Entwicklungsmodus entspricht (const debug), aber ich bin mir nicht sicher, wie ich dies in meiner Konfiguration verwenden, um eine andere Quellkarte zu bestimmen.

Hier ist meine aktuelle 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 
     }), 
    ] 
} 

Answer 1

process.env.NODE_ENV in webpack.config.js wird nur gesetzt, wenn Sie die Umgebungsvariable NODE_ENV bereitstellen, wenn webpack Aufruf, z.B. Verwenden Sie NODE_ENV webpack in Ihrem package.json. Wenn Sie Windows ebenfalls unterstützen müssen, verwenden Sie das env-variable Paket.

Siehe auch die Anleitung auf building for production für Details und andere Ansätze.