npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@existentialism/grunt-webpack

v1.0.0

Published

Use webpack with grunt.

Downloads

5

Readme

npm deps test chat

  • Version 4 of grunt-webpack supports webpack 4 as well as version 5 beta.
  • Version 3.2.0 of webpack-dev-server is needed if used (optional).

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
// or
// 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:

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

module.exports = function(grunt) {

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

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

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.

Webpack

imported config

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

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.

Lazy config loading

In some cases you might want to load the webpack config lazy. This can be done by specifying a function as the config value. The first paramter to this function will be the complete grunt config, which can be used in cases where grunt templates do not work (see below).

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

module.exports = function(grunt) {
  grunt.initConfig({
    webpack: {
      myconfig: () => ({
        entry: path.join(__dirname, "entry"),
        output: {
          path: __dirname,
          filename: "output.js",
        },
      }),
    },
  });

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

Grunt templates

grunt-webpack supports grunt templates in all string values in it's configuration.

In the next example we use a template for output.filename.

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

module.exports = function(grunt) {
  grunt.initConfig({
    outputFileName: "output.js",
    webpack: {
      myconfig: {
        entry: path.join(__dirname, "entry"),
        output: {
          path: __dirname,
          filename: "<%= outputFileName %>",
        },
      },
    },
  });

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

For plugins we cannot support grunt template interpolation, as plugins are class instances which we cannot modify during runtime without breaking them. If you need to use template in a string option to a plugin, you can use lazy config loading and use the supplied config. You can also use grunt inside directly to access utility methods:

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

module.exports = function(grunt) {
  grunt.initConfig({
    name: "Webpack",
    pkg: {
      copyright: '<%= name %>',
      version: '6.55.345',
    },
    webpack: {
      myconfig: (config) => ({
        entry: path.join(__dirname, "entry"),
        output: {
          path: __dirname,
          filename: "output.js",
        },
        plugins: [
          new webpack.BannerPlugin({
            banner: `/*! ${config.pkg.copyright} - Version ${config.pkg.version} dated ${grunt.template.today()} */`,
            raw: true,
          }),
        ],
      }),
    },
  });

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

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 not a bug in the plugin and 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.

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

module.exports = function(grunt) {
  grunt.initConfig({
    webpack: {
      myconfig: () => webpackConfig,
    },
  });

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