Webpack Dev Utils

A collection of utils to use with webpack.

• Installation
• Usage
  • Plugins
  • Server
  • Client
  • Lint
• Changelog

Installation

yarn add -D @alliance-software/webpack-dev-utils

Plugins

EntryPointBundleTracker

Inspired by webpack-bundle-tracker but works with webpack 4 and only cares about entry points. For each entry point defined will write out to a JSON file the required initial chunks for that entry point. This can then be read (eg. by django) and generate the necessary script and link tags to output in the HTML for each entry point.

Output looks like:

{
"status": "compiling",
}

Error (when stopOnError set or EntryModuleNotFoundError error encountered):

{
    "status": "error",
    "resource": "/path/to/file.js",
    "error": "ModuleBuildError",
    "message": "Module build failed <snip>"
}

Successful compilation

{
    "status": "done",
    "entrypoints": {
        "admin": [
            {
                "name": "common.bundle.js",
                "contentHash": "639269b921c8cf869c5f"
            },
            {
                "name": "common.bundle.css",
                "contentHash": "d60a0fa36613ea58a23d"
            }
            {
                "name": "admin.bundle.js",
                "contentHash": "c78fb252d4e00207afef"
            },
        ],
        "app": [
            {
                "name": "vendor.bundle.js",
                "contentHash": "774c52f57ce30a5e1382"
            },
            {
                "name": "common.bundle.js",
                "contentHash": "639269b921c8cf869c5f"
            },
            {
                "name": "common.bundle.css",
                "contentHash": "d60a0fa36613ea58a23d"
            },
            {
                "name": "app.bundle.js",
                "contentHash": "806fc65dbad8a4dbb1cc"
            },
        ]
    },
    "publicPath": "http://hostname/"
}

Usage:

const options = { stopOnError: true };
const config = {
    mode: 'development',
    entry: path.resolve(__dirname, './does-not-exist.js'),
    plugins: [new EntryPointBundleTracker(options)],
};
webpack(config);

Options:

• outputDir = '.' - Directory to output files to. Relative to the webpack output dir.
• filename = 'webpack-stats.json' - The filename to write to within outputDir
• stopOnError = false - Whether to stop on error and write out error message to JSON. If false will write out entry points as normal and it will be up to the frontend to handle displaying the error status. Note that if an entry point doesn't exist then the status will be set to 'error' regardless of what this setting is.
• indent = 2 - Indent to pass to JSON.stringify for files written out
• publicPath = null - Defaults to webpack config output.publicPath. Will be available in the final JSON under the 'publicPath' key.

LessModifySourcePreprocessorPlugin

A plugin to be used with less-loader for modifying the source of files that match a pattern.

Usage:

In the options for 'less-loader' pass an instance in plugins:

conf.module.rules.push({
    test: /\.(less)$/,
    include: /djrad/,
    use: [
        'style-loader',
        {
            loader: require.resolve('css-loader'),
            options: {
                importLoaders: 2,
            },
        },
        {
            loader: require.resolve('less-loader'),
            options: {
                javascriptEnabled: antd,
                plugins: [
                    new LessModifyPreprocessorPlugin({
                        test: /djrad\/src\/styles\/_variables\.less/,
                        apply(source) {
                            // Append our djrad overrides to the end of the djrad _variables.less file
                            const importStr = `\n@import (reference) '${path.resolve('./src-react/styles/_djrad-vars.less')}';`;
                            return source + importStr;
                        },
                    }),
                ],
            },
        },
    ],
});

Options:

• test - Regular expression that should match files you want to modify the source of
• apply - Method that applies your changes. Gets passed the source and an object that contains context and file information.

Server

Start Dev Server

Starts a webpack dev server with specified host, port and configuration.

If port is taken prompts to use a different port.

Usage:

const webpackProjectConfig = require('./webpack.project.config');
const startServer = require('@alliance-software/webpack-dev-utils/server/dev-server');

startServer('0.0.0.0', 3000, webpackProjectConfig.development);

Client

Hot Client Errors

Handle errors when running webpack dev server with hot reload enabled. Should be used in conjuctions with Start Dev Server.

Shows errors in page and in browser console. To configure what editor is used when links are clicked set REACT_EDITOR env var when you launch the dev server.

REACT_EDITOR=pycharm yarn dev

Usage:

Add to entry point along with webpack/hot/dev-server and react-hot-loader/patch.

// HMR related loaders must come first
entry.unshift('webpack/hot/dev-server');
entry.unshift(require.resolve('@alliance-software/webpack-dev-utils/client/hot-client-errors'));
entry.unshift(require.resolve('react-hot-loader/patch'));

Lint

Eslint Formatter

Wrapper around react-dev-utils

Usage:

const eslintFormatter = require('@alliance-software/webpack-dev-utils/eslintFormatter');

conf.module.rules.push(
    {
        test: /\.js/,
        enforce: 'pre',
        use: [
            {
                options: {
                    formatter: eslintFormatter,
                },
                loader: require.resolve('eslint-loader'),
            },
        ],
    }
);