# Plug and Play changes to the base boilerplate

## HTML Loader

Summary: Updated HTML-Loader to the latest (at time of update) version and added pre-processor for includes (as interpolate option was removed). Additionally, watch any HTML files by default (part of the HTML loader updates).

This update has already or in the very near future will be added to the boilerplate.
It has been made to bring the boilerplate inline with the current stable release of HTML loader and allow for more flexibility / upgrades in the future.

The update replaces the require syntax with a new include syntax, however in doing so a preprocess script is added which will aid in customizability in the future as it would allow for handlebars files etc. to be processed before importing them into the HTML. Giving project teams more flexibility over what happens with the HTML files before they are spat out.

Additionally, this update addresses NPM audit issues which could cause problems for some clients currently or into the future.

## Remove runtime chunk

Summary: Removed runtime chunk from webpack

The previous build would split JS into a runtime chunk and a main file, this is unneeded overhead in 99% of our builds that are not using chunking.

It causes issues when multiple webpack builds are attempted to be used on the same site (e.g a complex form inside a main site, or a landing page that inherits most styles from a main site but needs its own build too) as the runtime chunk collides with one another.

The benefits of the runtime chunk is that JS can be split into chunks and only loaded when needed, with the current patterns the majority of services teams use this cannot be done / is not done meaning that there will only ever be one chunk.

Removing runtime chunk also has the added benefit of freeing up a request stream to the server, increasing site performance.

Recommendation: The Plug & Play team believe that this should be adopted by default as getting chunking working correctly is somewhat complex, we believe build where this is needed the teams working on those builds would be able to enable this themselves.

## Updated dev server

Summary: updated dev server to expose items in dist folder

This is a straight forward change, exposing files from dist to be referenced.

Recommendation: Enable this by default

## Show webpack errors

Summary: show errors on client (e.g. if webpack has an error, spit it out on the HTML page, so you don't need to look at terminal to check if your build is still running)

This is a straight forward change that will show webpack errors to users in the loaded HTML page. Making it easier for users to notice webpack has stopped watching for changes.

Recommendation: Enable this by default

## PostCSS Updates

Summary: added post css to handle the following: - autoprefixing (also handled in the current version) - discard duplicate rules - reduce transform functions where possible (https://www.npmjs.com/package/postcss-reduce-transforms) - merge rules where appropriate

Autoprefix doesn't need an explanation, as it is the same behavior in the current boilerplate, just an updated method to achieve the result.

Discard duplicates rule is a no-brainer to add. It looks for any rules that are duplicates and will remove them so there is only one of the rules that exists, great when there is complex SASS generating similar rules.

Reduce transform function, this is another good one that has been added it breaks down complex transform properties to the most simple version resulting in better page / animation performance with no noticeable impacts.

Merge rules, similar to discard duplicates this is another good space saving rule to enable. It will merge rules together e.g:

```CSS
.a {
    text-decoration: underline;
    color: pink;
}

.link {
    text-decoration: underline;
    color: pink;
}
```

Would become:

```CSS
.a, .link {
    text-decoration: underline;
    color: pink;
}
```

With both rules still acting as expected but saving the space in the production file.

Recommendation: Enable all the above by default.

## SVG Sprites

Summary: Added svg sprite to allow for easier / more efficient use of SVG's in pages & Optimised svg with SVGO

We have added SVG sprites into boilerplate to aid in SVG usage throughout our templates, we have found this to be the cleanest way of doing this.
There are minimal down sides as SVG's are still able to be used in the old way of doing things just allowing for newer tools to be added too.

Recommendation: Enable by default, with CL / SO becoming more familiar with this approach and training other users.

## Minimize prod build

Summary: Minimize prod build no matter what and set minification to also remove comments from CSS

With source maps enabled there is no need that any prod code should be un-minified.

Recommendation: Turn on by default

## ESLint, Stylelint, and Prettier

Summary: Added a number of ESLint / Prettier / StyleLint rules

Our style rules are generally pretty restrictive, which we have found to be a great thing when maintaining code quality, peer reviews, and overall codebase familiarity.
Our rules enforce things like BEM naming conventions, spaces etc. While the rules probably aren't preferred for all, we have found that the quality that this brings to our code base greatly outweighs any single developers personal opinions.

We have all of these rules tightly coupled with our IDE's allowing for auto formatting etc. Due to this they almost take no effort at all to enforce in practice.

With the positives layed out above there is also a negative in that they do sometimes break things or need maintenance (stylelint upgrading to version 14 is an example of this).

Recommendation: Ship a very minimal set of rules with instruction on how to add / modify these allowing users to define a per-project style guide, until Squiz can / does agree upon a unified style guide.