Let's start by clearing up a common misconception. Webpack is a module bundler likeBrowserify orBrunch. It isnot a task runner likeMake,Grunt, orGulp. Task runners handle automation of common development tasks such as linting, building, or testing your project. Compared to bundlers, task runners have a higher level focus. You can still benefit from their higher level tooling while leaving the problem of bundling to webpack.

Bundlers help you get your JavaScript and stylesheets ready for deployment, transforming them into a format that's suitable for the browser. For example, JavaScript can beminified orsplit into chunks andlazy-loaded to improve performance. Bundling is one of the most important challenges in web development, and solving it well can remove a lot of pain from the process.

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

NPM Scripts

Often webpack users use npmscripts as their task runner. This is a good starting point. Cross-platform support can become a problem, but there are several workarounds for that. Many, if not most users, get by with npmscripts and various levels of webpack configuration and tooling.

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

Grunt

For those using Grunt, we recommend thegrunt-webpack package. Withgrunt-webpack you can run webpack orwebpack-dev-server as a task, get access to stats withintemplate tags, split development and production configurations and more. Start by installinggrunt-webpack as well aswebpack itself if you haven't already:

npminstall --save-dev grunt-webpack webpack

Then register a configuration and load the task:

Gruntfile.js

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: Object.assign({ watch:true}, webpackConfig),},});  grunt.loadNpmTasks('grunt-webpack');};

For more information, please visit therepository.

Gulp

Gulp is also a fairly straightforward integration with the help of thewebpack-stream package (a.k.a.gulp-webpack). In this case, it is unnecessary to installwebpack separately as it is a direct dependency ofwebpack-stream:

npminstall --save-dev webpack-stream

You canrequire('webpack-stream') instead ofwebpack and optionally pass it an configuration:

gulpfile.js

const gulp=require('gulp');const webpack=require('webpack-stream');gulp.task('default',function(){return gulp.src('src/entry.js').pipe(webpack({// Any configuration options...})).pipe(gulp.dest('dist/'));});

For more information, please visit therepository.

Mocha

Themocha-webpack utility can be used for a clean integration with Mocha. The repository offers more details on the pros and cons but essentiallymocha-webpack is a simple wrapper that provides almost the same CLI as Mocha itself and provides various webpack functionality like an improved watch mode and improved path resolution. Here is a small example of how you would install it and use it to run a test suite (found within./test):

npminstall --save-dev webpack mocha mocha-webpackmocha-webpack'test/**/*.js'

For more information, please visit therepository.

Karma

Thekarma-webpack package allows you to use webpack to pre-process files inKarma.

npminstall --save-dev webpack karma karma-webpack

karma.conf.js

module.exports=function(config){  config.set({    frameworks:['webpack'],    files:[{ pattern:'test/*_test.js', watched:false},{ pattern:'test/**/*_test.js', watched:false},],    preprocessors:{'test/*_test.js':['webpack'],'test/**/*_test.js':['webpack'],},    webpack:{// Any custom webpack configuration...},    plugins:['karma-webpack'],});};

For more information, please visit therepository.

5 Contributors