What are the differences between web package development and production modes?

Question

In Grunt or Gulp I myself determined all the requirements, such as: the material should be minimized only for production, the livereload function should be enabled only in the dev server.

Webpack handles this on its own, using it -dand -pparameters that switch the minimizebootloader mode (most loaders come with appropriate minifiers), devtooland similar materials (I don’t know what exactly). Most of this "just works."

But, on the other hand, there are some libraries that have a development and production mode. For example, React looks at process.NODE_ENV, and if it does production, it disables the checkpropTypes (which will later be deleted by minifier as dead code, thereby reducing the size of the packet). In Webpack, a common way to do this is to useDefinePlugin .

The problem is that this plugin should only be included in the assembly. Because of this, some people come up with two separate webpack configurations . This seems redundant since most of the work is already done with webpack. I would like to avoid this.

To find a better solution, I would like to understand what exactly changes when I use a parameter -dor -pand how it affects all bootloaders and plugins. I haven’t documented it anywhere. The existing documentation simply mentions "debug mode" or "view mode" without explaining what this means.

_{Note that I am not asking for an answer to this question. A good, detailed explanation will be appreciated.}

Answer 1

Shortcuts

As you said, -dis a shortcut for --debug --devtool source-map --output-pathinfowhere:

• --debug , . { debug: true } webpack.config.js
• --devtool { devtool: "sourcemap" } webpack @2: { devtool: 'eval-cheap-module-source-map' } ( )
• --output-pathinfo webpack, : __webpack_require__(/* ./src/containers/App/App.js */15).
  : { output: { pathinfo: true } }

, -p --optimize-minimize --optimize-occurence-order :

• --optimize-minimize webpack.optimize.UglifyJsPlugin , ( , )

• --optimize-occurence-order webpack.optimize.OccurenceOrderPlugin , , .

  _{: react , webpack __webpack_require__(1); __webpack_require__(1266);}

, , webpack.config.js, :

var webpack = require('webpack');
var webpackConfig = {
   // here goes your base config
};

// -d shortcut analogue
if (process.env.NODE_ENV === 'development') {
  webpackConfig.debug = true;
  webpackConfig.devtool = 'sourcemap';
  webpackConfig.output.pathinfo = true;
}

// -p shortcut analogue
if (process.env.NODE_ENV === 'production') {
  webpackConfig.plugins.push(new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('production')
  }));
  webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin());
  webpackConfig.plugins.push(new webpack.optimize.OccurenceOrderPlugin());
}

module.exports = webpackConfig;

, https://github.com/webpack/webpack/blob/master/bin/convert-argv.js#L19