@wok-cli/task-webpack

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