webpack-contrib/grunt-webpack


integrate webpack into grunt build process

License: MIT

Language: JavaScript

Keywords: grunt, grunt-webpack, plugin, webpack


npm deps test coverage chat

Grunt Webpack

Use Webpack with Grunt.

Install

Install this grunt plugin next to your project's Gruntfile.js. You also need to install webpack yourself, this grunt plugin does not install webpack itself.

yarn add webpack grunt-webpack --dev

You can still use npm

npm i webpack grunt-webpack --save-dev

If you also want to use the webpack-dev-server task you also need to install webpack-dev-server

yarn add webpack-dev-server --dev

Then add this line to your project's Gruntfile.js gruntfile:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({ 
    ...,
    webpack: {
      myConfig: {
        // your webpack config
      },
    },
    ...
  });

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

Configuration

webpack-grunt offers two different tasks webpack and webpack-dev-server. Both support all webpack options as can be seen in the webpack documentation. For exceptions and additions see this list.

Both Tasks

progress

Type: bool Default: true (false if no TTY present)

Activates or deactivates the progress output of webpack.

keepalive

Type: bool Default: false (true if watch mode is used and for webpack-dev-server task)

When set to true the grunt process/task will be kept alive after webpack task is finished. This is especially useful for watch and webpack-dev-server as these usually need to run as long as not manually killed.

Webpack Task

watch

Type: bool Default: undefined

Turn on watch mode. This means that after the initial build, webpack will continue to watch for changes in any of the resolved files.

Turning on watch mode also sets the following defaults:

  • Default cache to true
  • Default keepalive to true
  • Default failOnError to false

failOnError

Type: bool Default: true (false if watch mode is used)

Will terminate the grunt process when an error happens if set to true. If set to false the grunt process will not be immediately terminated on error and instead continue to run.

storeStatsTo

Type: string Default: null

When set the stats from webpack will be written to a variable with the name provided in this option. The variable can later be used inside of other grunt tasks with template tags <%= %>.

...
storeStatsTo: "webpackStats"

...

<%= webpackStats.hash %>
...

For more information about grunt template tags have a look at the grunt docs.

Webpack-dev-server Task

The webpack-dev-server options host, hotOnly, inline, port and public which are usually only available in the CLI can also be used in this grunt-plugin.

Examples

Webpack

This is a simple example that requires the webpack config from the config file. It also disables stats in non 'development' environments and enables watch in development.

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

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');
};

The webpack task in this example has two targets called prod and dev. They can be renamed to everything besides options. See the grunt docs for more information about targets.

On the command line you can then do the following.

# Run webpack with the `prod` target
> NODE_ENV='production' grunt webpack:prod

# Run webpack with the `dev` target
> grunt webpack:dev

# Run webpack for all targets
> grunt webpack

For more examples and information have a look at the webpack documentation which mostly also applies here besides the noted differences above.

Troubleshooting

Circular reference detected (.plugins)

If you encounter this message it means that one of the plugins which are present in your config have circular references. This is totally fine for webpack, but sadly grunt cannot handle these.

To workaround this problem use lazy config loading, by wrapping your config inside a function.

module.exports = function(grunt) {
  grunt.initConfig({
    webpack: {
      myconfig: function() {
        return {
          plugins: [...]
        };
      }
    }
  });

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

Maintainers


Daniel Tschinder

Juho Vepsäläinen

Joshua Wiens

Kees Kluskens

Sean Larkin

Project Statistics

Sourcerank 16
Repository Size 399 KB
Stars 234
Forks 72
Watchers 12
Open issues 6
Dependencies 753
Contributors 28
Tags 26
Created
Last updated
Last pushed

Top Contributors See all

Tobias Koppers Chip Lay Simon Rodwell Kyle Robinson Young Kurt Harriger Alan Sam Tiffin João Vieira Remi Liu Joshua Wiens Marek Suscak Suneil Nyamathi Linh Le Tung Benjamin Blackwood Johannes Ewald Pratik Patel Stuart Colville Loïc CHOLLIER Kat Marchán Paul

Packages Referencing this Repo

grunt-webpack
Use webpack with grunt.
Latest release 3.1.3 - Updated - 234 stars

Recent Tags See all

v3.1.3 September 02, 2018
v3.1.2 May 14, 2018
v3.1.1 March 14, 2018
v3.1.0 March 14, 2018
v3.0.2 July 11, 2017
v3.0.1 July 10, 2017
v3.0.0 May 05, 2017
v3.0.0-beta.2 April 09, 2017
v3.0.0-beta.1 March 28, 2017
v2.0.1 January 27, 2017
v2.0.0 January 27, 2017
v2.0.0-beta.6 January 06, 2017
v2.0.0-beta.5 December 15, 2016
v2.0.0-beta.4 December 15, 2016
v2.0.0-beta.3 December 12, 2016

Something wrong with this page? Make a suggestion

Last synced: 2017-07-11 13:05:24 UTC

Login to resync this repository