In Grunt or Gulp, I used to define all the requirements myself, like: stuff should be minified only for production, livereload should be enabled only in dev server.
Webpack handles this on its own, via its -d
and -p
options, that toggle the loaders' minimize
mode (most loaders ship with their relevant minifiers), the devtool
and similar stuff (I don't know what exactly). Most of that "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's production
, it disables the propTypes
checking (which will be later stripped off by minifier as dead code, thus reducing bundle size). In Webpack, a common way to do this is to use the DefinePlugin
.
The problem is, that this plugin should be enabled only in the production build. Some people go as far as having 2 separate webpack configs because of that. This seems overkill, since most of the job is already done by webpack. I'd like to avoid this.
To find some better solution, I'd like to understand what exactly changes when I use the -d
or -p
option, and how does it affect all the loaders and plugins. I didn't find it documented anywhere. The existing documentation just mentions "debug mode" or "watch mode" without explaining what does it actually mean.
Note that I'm not asking for a do-this-and-that answer. A good, detailed explanation would be appreciated.
Shortcuts
Like you said, -d
is a shortcut for --debug --devtool source-map --output-pathinfo
where:
--debug
activates debug mode for loaders and its behaviour depends on each loader. You can activate it via param { debug: true }
in your webpack.config.js
--devtool
is basically allow to select type of sourcemaps for your files via param { devtool: "sourcemap" }
or if you use webpack@2: { devtool: 'eval-cheap-module-source-map' }
(See all options)
--output-pathinfo
will write original filepath into webpack's requires like this: __webpack_require__(/* ./src/containers/App/App.js */15)
.
You can activate it via: { output: { pathinfo: true } }
Second shortcut, -p
stands for --optimize-minimize --optimize-occurence-order
where:
--optimize-minimize
will add webpack.optimize.UglifyJsPlugin into your module plugins which will minify your code (remove spaces, mangle variable names and other optimizations)
--optimize-occurence-order
will add webpack.optimize.OccurenceOrderPlugin to plugin list which will assign your most used dependencies lower ids, so code will be smaller.
For example: you have imported react
in every file and webpack will try to require it like that __webpack_require__(1);
instead of __webpack_require__(1266);
Putting all together
So, in your case if you have webpack.config.js
, you can change it like this:
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;
If you want to look at actual parsing of these params, look at https://github.com/webpack/webpack/blob/master/bin/convert-argv.js#L19