Webpack Task

Sharable tasks for Webpack.

• Installation
• Parameters
• Hooks
• Usage
• Example
• Watching for changes
  • Reloading the page
• Usage with webpack-dev-middleware
  • Live Reload and Hot Module Replacement
  • Shorthand signature
• Babel integration

Installation

This task requires @wok-cli/core and webpack@^4.0.0 as peer dependency.

npm i @wok-cli/core webpack@^4.0.0 @wok-cli/task-scripts --save-dev

Parameters

| parameter | type | default | note | | -------------- | ------ | --------------- | --------------------------------------------------- | | entry | object | | Webpack entry configuration (1) | | outputFolder | string | | Bundle output folder (1) | | context | string | process.cwd() | Compiler context folder(1) |

1. Supports environment templates.

Hooks

| name | type | description | | ---------------------- | ---------------------- | ------------------------------------------- | | config:chain | webpack-chain | The default webpack chain instance | | config | object | The resolved webpack configuration object | | completed | stats | Run when compilation ends (single mode) | | completed:watch | stats | Run when compilation ends (watch mode) | | completed:middleware | stats | Run when compilation ends (middleware mode) |

Usage

By default, the task will output sourcemaps in development. Each entry will be stored in the outputFolder with the following pattern: [name].bundle.js.

Example

const $ = require('@wok-cli/core');
const webpackTask = require('@wok-cli/task-webpack');

const webpack = $.task(webpackTask, {
  entry: { main: './src/main.js' },
  outputFolder: 'public',
});

exports.webpack = webpack;

By running the gulp webpack task, webpack will bundle ./src/main.js and save it as ./public/main.bundle.js.

Watching for changes

The returned task has a watch sub-task that triggers the webpack watcher instead of a single compilation.

const $ = require('@wok-cli/core');
const serveTask = require('@wok-cli/task-serve');
const webpackTask = require('@wok-cli/task-webpack');

const webpack = $.task(webpackTask, {
  entry: { main: './src/main.js' },
  outputFolder: 'public',
});

// watch and compile files
exports.watch = webpack.watch;

Reloading the page

To reload the page after each successful compilation you can leverage the completed:watch hook. For example here is how you can trigger a reload with the @wok-cli/server task:

const $ = require('@wok-cli/core');
const serveTask = require('@wok-cli/task-serve');
const webpackTask = require('@wok-cli/task-webpack');

const webpack = $.task(webpackTask, {
  entry: { main: './src/main.js' },
  outputFolder: 'public',
});

const serve = $.task(serveTask, {
  baseDir: ['public'],
});

const reload = serve.reload();

webpack.tap('completed:watch', 'reload', (stats) => {
  if (!stats.hasErrors()) {
    reload();
  }
  return stats;
});

export.serve = $.series(serve, webpack.watch)

Running gulp serve will run a local server watching for file changes and reloading the page after each compilation.

Usage with webpack-dev-middleware

To setup a webpack development middleware, you can use the middleware method. This will return an instance of webpack-dev-middleware to be used in any express-like application.

For example here is an example implementation with the @wok-cli/server task that uses webpack-dev-middleware in development mode:

const $ = require('@wok-cli/core');
const serveTask = require('@wok-cli/task-serve');
const webpackTask = require('@wok-cli/task-webpack');

const webpack = $.task(webpackTask, {
  entry: { main: './src/main.js' },
  outputFolder: 'public',
});

const serve = $.task(serveTask, {
  baseDir: ['public'],
});


server.tap('middlewares', 'webpack', (middlewares) => {
  if ($.env.production === false) {
    middlewares.set('webpack', webpack.middleware());
  }
  return middlewares;
});

export.serve = $.series(serve)

Live Reload and Hot Module Replacement

The above configuration will serve the bundled application via webpack-dev-middleware but to see the changes you still need to refresh manually the page.

To automate the process you can again leverage the built-in reload task of @wok-cli/task-serve attaching a function to the completed:middleware hook:

const $ = require('@wok-cli/core');
const serveTask = require('@wok-cli/task-serve');
const webpackTask = require('@wok-cli/task-webpack');

// ...

const reload = serve.reload();

webpack.tap('completed:middleware', 'reload', (stats) => {
  if (!stats.hasErrors()) {
    reload();
  }
  return stats;
});

server.tap('middlewares', 'webpack', (middlewares) => {
  if ($.env.production === false) {
    middlewares.set('webpack', webpack.middleware());
  }
  return middlewares;
});

export.serve = $.series(serve)

Another popular reload option is Hot Module Replacement. You can enable it by passing an options object with hot: true to the middleware method:

// ...

server.tap('middlewares', 'webpack', (middlewares) => {
  if ($.env.production === false) {
    middlewares.set('webpack', webpack.middleware({ hot: true }));
  }
  return middlewares;
});

export.serve = $.series(serve)

Shorthand signature

For your convenience, the task exposes an utility method asServeMiddleware to quickly integrate it with @wok-cli/task-serve:

// ...
const webpack = $.task(webpackTask, {
  entry: { main: './src/main.js' },
  outputFolder: 'public',
});

const serve = $.task(serveTask, {
  baseDir: ['public'],
});

// run `webpack-dev-middleware`
// and reload on changes
webpack.asServeMiddleware(serve);

// run `webpack-dev-middleware`
// and trigger HMR on changes
webpack.asServeMiddleware(serve, { hot: true });

Babel integration

To setup babel-loader use the config:chain hook:

// ...
const webpack = $.task(webpackTask, {
  entry: { main: './src/main.js' },
  outputFolder: 'public',
});

webpack.tap('config:chain', 'babel', (config) => {
  config.module
    .rule('js')
    .test(/\.m?js$/)
    .use('babel')
    .loader('babel-loader');
  return config;
});