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

仅当您在调用webpack时提供环境变量process.env.NODE_ENV时，才会设置webpack.config.js中的{p> NODE_ENV。在NODE_ENV webpack中使用package.json。如果您还需要支持Windows，请使用env-variable包。

有关详细信息和其他方法，另请参阅building for production指南。

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

1 个答案: