Integrations

Let's start by clearing up a common misconception. webpack is a module bundler like Browserify or Brunch. It is not a task runner like Make, Grunt, or Gulp. Task runners automate common development tasks such as linting, building, or testing your project. Compared with bundlers, task runners operate at a higher level. You can still benefit from their higher-level tooling while leaving the problem of bundling to webpack.

Bundlers help you prepare your JavaScript and stylesheets for deployment, transforming them into a format suitable for the browser. For example, JavaScript can be minified or split into chunks and lazy-loaded to improve performance. Bundling is one of the most important challenges in web development, and solving it well removes a great deal of pain from the process.

The good news is that, although there is some overlap, task runners and bundlers can work well together when approached the right way. This guide provides a high-level overview of how webpack can be integrated into some of the more popular task runners.

webpack users often use npm scripts as their task runner. This is a good starting point. Cross-platform support can become a problem, but there are several workarounds. Many — perhaps most — users get by with npm scripts and various levels of webpack configuration and tooling.

So while webpack's core focus is bundling, a variety of extensions can enable you to use it for jobs typical of a task runner. Integrating a separate tool adds complexity, so weigh the pros and cons before proceeding.

For those using Grunt, we recommend the grunt-webpack package. With grunt-webpack, you can run webpack or webpack-dev-server as a task, access stats within template tags, split development and production configurations, and more. Start by installing grunt-webpack as well as webpack itself if you haven't already:

npm install --save-dev grunt-webpack webpack

Then register a configuration and load the task:

const webpackConfig = require('./webpack.config.js');

module.exports = function (grunt) {
  grunt.initConfig({
    webpack: {
      options: {
        stats: !process.env.NODE_ENV || process.env.NODE_ENV === 'development',
      },
      prod: webpackConfig,
      dev: { watch: true, ...webpackConfig },
    },
  });

  grunt.loadNpmTasks('grunt-webpack');
};

For more information, see the repository.

Gulp is also a fairly straightforward integration with the help of the webpack-stream package (a.k.a. gulp-webpack). In this case, there is no need to install webpack separately, since it is a direct dependency of webpack-stream:

npm install --save-dev webpack-stream

You can require('webpack-stream') instead of webpack and optionally pass it a configuration:

import gulp from 'gulp';
import webpack from 'webpack-stream';

gulp.task('default', () =>
  gulp
    .src('src/entry.js')
    .pipe(
      webpack({
        // Any configuration options...
      })
    )
    .pipe(gulp.dest('dist/'))
);

For more information, see the repository.

The mocha-webpack utility provides a clean integration with Mocha. The repository covers the pros and cons in more detail, but essentially mocha-webpack is a simple wrapper that offers almost the same CLI as Mocha itself, along with various webpack features such as an improved watch mode and better path resolution. Here's a small example of how to install it and use it to run a test suite found within ./test:

npm install --save-dev webpack mocha mocha-webpack
mocha-webpack 'test/**/*.js'

For more information, see the repository.

The karma-webpack package lets you use webpack to pre-process files in Karma.

npm install --save-dev webpack karma karma-webpack

For more information, see the repository.