@wok-cli/task-webpack v1.0.1
Webpack Task
Sharable tasks for Webpack.
- Installation
- Parameters
- Hooks
- Usage
- Example
- Watching for changes
- Usage with
webpack-dev-middleware
- 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) |
- 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;
});
4 years ago