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

Question

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

目前，我只是注释掉我不想要的部分，这显然非常不方便，我希望根据我正在运行的npm脚本（生产服务器或webpack dev服务器）动态地做出这个决定。

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

以下是我的当前配置...

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 
       }), 
    ] 
 } 

- Paulos3000

Answer 1

在webpack.config.js中，只有在调用webpack时提供环境变量NODE_ENV，例如在package.json中使用NODE_ENV webpack，才会设置process.env.NODE_ENV。如果您需要支持Windows，还可以使用env-variable包。

有关详细信息和其他方法，请参见构建生产环境应用程序指南。

- simon04

Answer 2

TL:DR - 一个webpack.config.js文件可以导出一个具有两个参数的函数。当调用webpack时，可以使用这些参数之一来动态设置配置选项。

• 第一个参数是一个环境，可以设置为production或development（或任何其他值）。例如：$webpack --env production。

• 第二个参数是一个选项映射，可以用于访问传递的任何选项。例如：$webpack --mode production。

更多信息、示例和有用文档的链接如下：

这适用于webpack 5（但我认为也适用于webpack 4）。所有这些信息都来自webpack配置类型文档，特别是第一节"导出一个函数"。

以下示例直接来自webpack文档。他们不使用NODE_ENV变量，而是使用webpack的env.production变量来设置mode配置选项为'production'或'development'。设置mode配置选项会将process.env.NODE_ENV设置为[production或development]。请查看这些文档获取更多信息。

module.exports = function(env, argv) {

  return {

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

    // Note that they also set devtool here based on the env variable
    devtool: env.production ? 'source-map' : 'eval',
     plugins: [
       new TerserPlugin({
         terserOptions: {

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

  };
};

如果您使用上面的示例来设置模式和devtool，您应该能够完全从插件数组中删除DefinePlugin，因为这些选项将在幕后自动包含和设置插件。然而，如果您希望尽可能保持配置与当前设置相似，您可以简单地使用三元运算符来设置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 
      }), 
   ] 

- Snap