Search code examples
javascriptgruntjswebpackbuild-system

Webpack: Separate production and dev builds

I have recently started to evaluate webpack. Having used grunt previously I am used to the fact that I can start grunt with various parameters to configure what is going to happen during the build. For example:

grunt watch

would run a debug build and enable the watch task. While:

grunt build

would trigger a fully minimized production build that has all development specific functionality disabled.

I am wondering if webpack has a similar feature that lets me easily switch between different configurations. I have done some research already but I did not like the approaches I have seen so far:

  • I saw a suggestion to specify NODE_ENV=production before calling webpack, but this is not platform independend (e.g. does not work on windows).
  • Using the -p switch, but that seems to only affect minimization
  • Using a separate config file for webpack, but I would prefer a solution where I do not have to maintain two separate files.

I understand that webpack is not actually a task runner such as grunt or gulp, but rather a module bundler. But its being promoted as a replacement for grunt or gulp see this Medium.com Blog.

What I would really like to see is the ability to get a development build with something like webpack watch and a production build with webpack or webpack build is that possible with webpack

Solution

  • First of all, if you use webpack-dev-server it is quite easy to understand you are in dev mode:

    let isDevMode = process.argv[1].endsWith('webpack-dev-server') || process.argv[1].endsWith('webpack-dev-server.js');

    First condition is for Linux / mac, the second is for Windows.

    and then use this to configure your files.

    If you are not using dev server you can pass any parameter while running the webpack as you would do with any nodejs script (I use minimist to read the parameters but it is just a sugar, don't use if you don't need to):

    let argv = require('minimist')(process.argv.slice(2));

let isDevMode = argv.dev; // or watch or whatever you want to pass

    and then call it that way:

    webpack --dev

    This is actually a very flexible way of doing lots of things, not only specifying dev mode. I use it also to specify bundle names, etc. The only thing you need to care about is avoiding using the parameters which are served by webpack itself.