根据开发/生产模式切换 webpack 源映射

Question

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

我只是注释掉我不想要的，这显然很不方便，我希望根据我正在运行的 npm 脚本（生产服务器或 webpack 开发服务器）动态地做出这一决定。

我已经有一个与开发模式相对应的变量（

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

仅当您在调用 webpack 时提供环境变量

process.env.NODE_ENV

 时，才会设置 

webpack.config.js

中的

NODE_ENV

，例如在您的

NODE_ENV webpack

中使用

package.json

。如果您还需要支持 Windows，请使用

env-variable

包。

另请参阅生产构建指南以了解详细信息和其他方法。

Answer 2

TL:DR -

webpack.config.js

文件可以导出具有 2 个参数的函数：

• 第一个参数是环境，可以设置为

  production

  或

  development

  （或任何其他值）。

• 第二个参数是选项映射，可用于访问任何传递的选项。

这些参数可以在调用 webpack 时设置，并用于动态设置配置文件属性。

这适用于 webpack 5（但我认为也可能适用于 webpack 4）。所有这些信息都是我从 webpack Configuration Types 文档中获得的，特别是第一部分“导出函数”。

以下示例直接来自 webpack 文档。他们不使用 NODE_ENV 变量，而是使用 webpack

env.production

变量将

mode

配置选项相应地设置为

'production'

或

'development'

。设置

mode

配置选项“将

process.env.NODE_ENV

上的

DefinePlugin

设置为 [

production

或

development

]”。检查这些文档以获取更多信息。

module.exports = function(env, argv) {

  return {

    mode: env.production ? 'production' : 'development',

    devtool: env.production ? 'source-map' : 'eval',
     plugins: [
       new TerserPlugin({
         terserOptions: {

          compress: argv.mode === 'production' // only if `--mode production` was passed
         }
       })
     ]

  };
};

如果您使用上面的示例来设置模式和开发工具，您应该能够从

DefinePlugin

数组中完全删除

plugins

，因为这些选项将在幕后自动包含并设置插件。但是，如果您想让您的配置尽可能与当前设置相似，您可以简单地使用三元运算符来设置

devtool

选项：

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

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

module.exports = { 
    // dynamically set devtool based on debug status
    devtool: debug ? 'eval-source-map' : '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 
      }), 
   ]