webpack - 根据开发/生产模式切换 webpack source map

Question

我想知道如何指示我的 webpack 配置为开发和生产模式运行不同的源映射。

事实上，我只是注释掉了我不想要的那个，这显然很不方便，我希望根据我正在运行的 npm 脚本(生产服务器或 webpack dev)动态地做出这个决定服务器。

我已经有一个对应于开发模式的变量 (const debug)，但我不确定如何在我的配置中使用它来确定不同的源映射。

这是我当前的配置...

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 仅当您在调用 webpack 时提供环境变量 NODE_ENV 时设置，例如在你的 package.json 中使用 NODE_ENV webpack。如果您还需要支持 Windows，请使用 env-variable包。

另请参阅 building for production 上的指南了解详情和其他方法。