@lcooper/webpack-messages

A tool for extracting and prettifying error and warning messages from a webpack stats object for display in the console.

Installation

Install with npm:

npm install @lcooper/webpack-messages --save-dev

Or with yarn:

yarn add @lcooper/webpack-messages --dev

Usage

const webpack = require('webpack'),
    webpackMessages = require('@lcooper/webpack-messages');

// create webpack compiler instance
const compiler = webpack(/* config */);

compiler.hooks.invalid.tap('invalid', () => {
    console.log('Compiling...');
});

compiler.hooks.done.tap('done', (stats) => {
    // format webpack error / warning messages
    const { errors, warnings } = webpackMessages(stats);
    // check for errors
    if (errors.length) {
        console.log('Failed to compile.');
        console.log(errors.join(''));
        return;
    }
    // check for warnings
    if (warnings.length) {
        console.log('Compiled with warnings.');
        console.log(warnings.join(''));
    } else {
        console.log('Compiled successfully');
    }
});

Integration with ESLint and stylelint

This tool works best on ESLint and stylelint errors when integrated with ESLint via a custom eslint formatter and with stylelint via a custom stylelint formatter.

To integrate with ESLint, add the following to your eslint-webpack-plugin setup in your webpack config:

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
    // ... other webpack config options ...
    plugins: [
        // ... other plugins ...
        new ESLintPlugin({
            // ... other eslint-webpack-plugin options ...
            formatter: require.resolve('@lcooper/webpack-messages/eslint-formatter'),
        }),
    ],
    // ...
};

To integrate with stylelint, add the following to your stylelint-webpack-plugin setup in your webpack config:

const StylelintPlugin = require('stylelint-webpack-plugin');

module.exports = {
    // ... other webpack config options ...
    plugins: [
        // ... other plugins ...
        new StylelintPlugin({
            // ... other stylelint-webpack-plugin options ...
            formatter: require('@lcooper/webpack-messages/stylelint-formatter'),
        }),
    ],
    // ...
};

API

webpackMessages(stats)

Extract and format webpack error / warning messages

• stats - a webpack stats object

Returns: { errors: string[], warnings: string[] }.

Under the hood, this method simply calls webpackMessages.extract then webpackMessages.format

webpackMessages.extract(stats)

Extract error / warning data from a webpack stats object.

• stats - a webpack stats object

Returns: { errors: Object[], warnings: Object[] }.

webpackMessages.format(data)

Transform error / warning data into formatted readable output strings.

• data - extracted error / warning data from a call to webpackMessages.extract(stats).

Returns: { errors: string[], warnings: string[] }.

Related

@lcooper/create-app - Tool for creating React apps with no configuration.
@lcooper/app-scripts - Web app scripts and configuration.
@lcooper/dev-server - Development server with HMR.
@lcooper/dev-overlay - Overlay that displays errors and warnings in the browser.