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
`

$3

#### 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:
`json
{
"status": "compiling",
}
`

Error (when stopOnError set or EntryModuleNotFoundError error encountered):
`json
{
"status": "error",
"resource": "/path/to/file.js",
"error": "ModuleBuildError",
"message": "Module build failed "
}
`

Successful compilation

`json
{
"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:

`js
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:

`js
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.

$3

#### 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:

`js
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);
`

$3

#### 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.

`bash
REACT_EDITOR=pycharm yarn dev
`

Usage:

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

`js
// 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'));
`

$3

#### Eslint Formatter

Wrapper around react-dev-utils

Usage:

`js
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'),
},
],
}
);
``