freshheads/webpack-config-builder

Builds webpack config files with a customizable set of adapters

webpack-config-builder's Issues

Check how we can make some Freshheads defaults more performant by default

See https://webpack.js.org/guides/build-performance/

There are some adjustments that could be made for instance to make sure that loaders are only applied on specific folders or file types, that might speed things up.

More research is required.

Remove TargetAdapter from defaultStack

Default target is : web of browserslists wanneer er een browserslist bestand gevonden is. Maar doordat er nu target: 'web' wordt toegevoegd kijkt hij voor de output van de javascript niet naar browserslist.

Probleem op dit moment is dat wanneer in je config bv nog IE11 staat de code niet omgezet word naar ES5 omdat webpack 5 standaard ES2015 output. Het verstandigste lijkt me om de target adapter weg te halen uit de defaultStack zodat je die alleen toevoegt wanneer je een uitzondering wil maken.

https://webpack.js.org/migrate/5/#need-to-support-an-older-browser-like-ie-11

Voor de toekomst wil je ook dat hij naar de browserslist file kijkt om juist nieuwere versies van ecmascript te gebruiken om zo naar nog kleinere builds te kunnen gaan.

Upgrade resolve-url-loader

De discussie rondom de v4 en nu al voorbereiding voor v5 maakt me nog wat terughoudend. Vooral omdat je waarschijnlijk de problemen pas ervaart wanneer je dit in verschillende projecten gaat testen.

Wellicht iets voor v5?

https://github.com/bholloway/resolve-url-loader/releases

bholloway/resolve-url-loader#200

Upgrade mini-css-extract-plugin to 2.x

Explore the impact of this release on existing projects. Should paths be changed?
Looks like it matches our v4 version which only support webpack 5 and uses asset modules.
But if css paths need to changes in project this is considered a breaking change.

https://github.com/webpack-contrib/mini-css-extract-plugin/releases/tag/v2.0.0

Typing for Adapter.d.ts isn't available in NPM package

Which should be available for creating my own project specific adapter.

import { Adapter } from '@freshheads/webpack-config-builder'

export default AnalyzeAdapter implements Adapter {

}

Upgrade mini-css-extract-plugin to 1.0 stable release

The introduced breaking change should not effect our projects as we already use esModule syntax for importing styles. But decide if this upgrade can be part of current major version.

https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/CHANGELOG.md

ClassName optimalization when using Css Modules

When using CSS Modules, classNames have to be optimized. Otherwise classNames will be Base64 hashes, which make code inspections difficult.
Please add the following to the css options of the DefaultStackAdapter:

cssLoaderOptions: { modules: { localIdentName: isProduction ? '[hash:base64]' : '[name]__[local]___[hash:base64:5]', }, },

This way, classNames will be hashes only in production, and easy to identify in development

Klaarmaken voor NPM 7

Bump version constraints

Following version constraints have been proven to work with the current code (v4.x) . But might contain breaking changes when using them in a project. Most importantly some drop support for node 12.

We could create a new major version to facilitate the upgrade.

css-minimizer-webpack-plugin@4
css-loader@6
mini-css-extract-plugin@2
postcss-loader@7
sass-loader@13
copy-webpack-plugin@11
resolve-url-loader@5

Validate adapter and builder configuration at runtime

...not just during development, using typescript and unit-tests, to create a better and clearer developer experience.

Maybe use a tool like Yup or some sorts?

Rename Freshheads modules according to usage not webpack entry key

As:

• we want users to be able to use it without knowning a whole lot about Webpack and it's configuration
• some implementations require adjustments to the webpack config on multiple configuration entry keys

Todo

• Rename Freshheads adapters to match what they do instead of where they go in the webpack configuration
• See if logically some of the Freshheads adapters should be combined (for instance the uglify js and javascript adapter)
• Add additional defaults to DefaultStackAdapter

Enable css modules camelcase

zodat we in de css wel BEM kunnen blijven gebruiken maar in JS wel valid objecten hebben.

.block__element
.block--modifier

word:

styles.blockElement
styles.blockModifier

Zie https://webpack.js.org/loaders/css-loader/#exportlocalsconvention voor implementatie

No longer required to supply a custom naming function for classNames

See topic: webpack-contrib/css-loader#1307

This works too. No need to use createClassNameGeneratorForCSSLoader() function.

        new DefaultStackAdapter({
            css: {
                enabled: true,
                cssLoaderOptions: {
                    sourceMap: true,
                    modules: {
                        auto: true,
                        localIdentName:
                            nodeEnv === 'production'
                                ? '[hash:base64]'
                                : '[name]__[local]',
                    },
                },
            },
        }),

We could leave the function in for BC. The above code might be interesting to add to our default stack.

Document Freshheads adapters

Only require optional modules when the configuration states that they are in use

In some adapters, optional modules are imported on top of the file, but are only required when you enable some configuration. It's only then that they should be required, not on module load.

Improve naming in prod environments for assets

See: LoadReferencedFilesAdapter.ts [name].[hash][ext][query]

But we might what to be consistent and also add the name to js / css / copied assets.

When using typescript, use `fork-ts-checker-webpack-plugin` for better performance of type checking

@see https://github.com/freshheads/013/commit/4e2c90ce31f6bcb2121dbd6f0672310e83b7afde

Upgrade to css-loader 5.x

Added support for postcss 8.x which we already use. So not sure what's changed but looks like a good idea to upgrade.
Since it's working with css-loader 4.x we might be able to keep supporting this version so we don't create a breaking change. Other changes aren't relevant for our setup.

https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md

SVGO optimalisations imported in css results in error when xlink attributes are being used

For example this svg get's importerd in css:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
    <defs>
        <g id="d">
            <g id="b">
                <path id="a" d="M0-1l-.3 1 .5.1z"/>
                <use transform="scale(-1 1)" xlink:href="#a"/>
            </g>
            <g id="c">
                <use transform="rotate(72)" xlink:href="#b"/>
                <use transform="rotate(144)" xlink:href="#b"/>
            </g>
            <use transform="scale(-1 1)" xlink:href="#c"/>
        </g>
    </defs>
    <path fill="#039" d="M0 0h512v512H0z"/>
    <g fill="#fc0" transform="translate(256 258.4) scale(25.28395)">
        <use width="100%" height="100%" y="-6" xlink:href="#d"/>
        <use width="100%" height="100%" y="6" xlink:href="#d"/>
        <g id="e">
            <use width="100%" height="100%" x="-6" xlink:href="#d"/>
            <use width="100%" height="100%" transform="rotate(-144 -2.3 -2.1)" xlink:href="#d"/>
            <use width="100%" height="100%" transform="rotate(144 -2.1 -2.3)" xlink:href="#d"/>
            <use width="100%" height="100%" transform="rotate(72 -4.7 -2)" xlink:href="#d"/>
            <use width="100%" height="100%" transform="rotate(72 -5 .5)" xlink:href="#d"/>
        </g>
        <use width="100%" height="100%" transform="scale(-1 1)" xlink:href="#e"/>
    </g>
</svg>

Results in Error: postcss-svgo: Error in parsing SVG: Unbound namespace prefix: "xlink"

when using:

background-image: url(map-get($sprites, 'eu-1x1'));

My guess is that xmlns:xlink="http://www.w3.org/1999/xlink" namespace get's stripped somewhere

Add support for css modules

Zodat je vanuit javascript met import styles from 'test.module.scss de classes kan gebruiken op bv een react component. De classes zijn hiermee direct scoped en krijgen een unieke hash.

Nu werkt het niet omdat er wat loaders conflicteren of dat de juiste instellingen missen.
Volgens mij moeten er 2 loaders komen met een test op het bestandsnaam of .module er in staat.
Zie ook: https://developerhandbook.com/webpack/how-to-configure-scss-modules-for-webpack/

Wel eerst verder uitzoeken.

Aliasen voor webpack config en Typescript config synchroniseren

Misschien kunnen we dit ergens onderbrengen. Zie wat Joost hier gedaan heeft:

https://github.com/freshheads/cocoroco/blob/develop/assets/frontend/webpack.config.js#L18

Make an autoprefixer settings for SassLoaderAdapter

Autoprefixer is a plugin that is created in SassLoaderAdapter. I would be nice if you could set the config of that plugin, so their is no need to create your own SassLoaderAdapter.

We often need this to start prefixing css grid implementation.

Integratie `eslint`

Zat ook in gulp-task, zie: https://github.com/freshheads/gulp-task/blob/develop/lib/task/webpack.js#L310

Onderzoeken of het mogelijk is om oude builds niet te vervangen als er geen bestanden zijn aangepast

De hash die gebruikt wordt voor browser cache busting dus bijvoorbeeld baseren op de huidige status. Als hij hetzelfde is, hoeft de browser, na een deployment waarin niets aan de frontend is aangepast, dus ook niets opnieuw binnen te halen..

Prepare for webpack 5

Zitten inmiddels op beta 29, lijkt me mooi moment om in een aparte branch alvast voorbereidingen te gaan doen voor webpack 5.

Zie migration guide:
https://webpack.js.org/migrate/5/

Wat opvalt is dat es2015 code default is, waardoor ie11 support zou vervallen. We zullen moeten bepalen wat onze default gaat zijn.

Ook ben ik benieuwd of al onze dependencies al klaar zijn voor webpack 5

Don't allow '/' as output path

Clearing the build path is intended behaviour. This also means that setting '/' as output will clear the project. We probably shouldn't allow this to happen. Don't ask me how i figured this out.

Upgrade postcss-loader

Contains a breaking change that post-css is now required as peer dependency so we should add it as a requirement to the CSS Adapter.

This is required to update autoprefixer to 10.x so add this as well.

Instead of webpack-stats-plugin try webpack-manifest-plugin

Seems to have wider support and might solve some problems we have with the latest version of webpack config builder and assets that are missing from the stats file with certain plugins.

But mainly this is just something to try-out. Seen this at NextJs.

https://github.com/shellscape/webpack-manifest-plugin

Use `project_root` builder configuration instead of always using `process.cwd()`

Joris:

Daarnaast lijkt het mij goed om een soort variabele project_root ofzo te gaan gebruiken i.p.v. process.cwd()

Create babel.config.js based on loaded adapters

And merge this with project specific babel.config.js.

Remove need for redundant 'enabled' option in CSS and Javascript settings for DefaultStackAdapter

When adding options for CSS and/or Javascript in the DefaultStackAdapter, te option enabled had to be set to true.
This feels unnecessary, so maybe merge the options when they are set.

Image optimalisation adapter

Images (svg/png/jpg) need optimalisation to ensure that meta data is stripped and quality matches web standards. This way the end user does not load images that are too big.
SVG needs cleaning code to optimize.

There is a plugin to do this, would be nice if we could add this to adapter to make it easier to implement with all the best settings set. Also we could a test that it is loaded after copy webpack plugin to ensure these images are also optimized.

https://www.npmjs.com/package/imagemin-webpack

Is this something that would be worth adding ?

Use webpack asset modules instead of file-loader

Read: https://webpack.js.org/guides/asset-modules/

Looks like this is done by default but we are checking files twice now. So we might be able to remove the LoadReferencedFileAdaptor or add a setting that AssetModules should skip the matches.

But if it works we might as well drop file-loader and LoadReferencedFileAdaptor.

Migration guide:

If you have rules defined for loading assets using raw-loader, url-loader, or file-loader, please use Asset Modules instead as they're going to be deprecated in near future.

Better validation of minimal required version of modules needed in adapter

At this point, as we apply an adapter, we sometimes check for the availability of a installed module. We however don't check against a minimum version constraint. Instead we add these dependencies as peer dependencies in the package.json. But this results in all required modules for all adapters being warned during installation, not taking into account the actual adapters we use.

Requested situation:

• be able to validate agast a mimum version in adapters as well
• remove the versions/modules from the peer dependencies except for peer dependencies that are required to run the adapters itself

Add webp support to asset module loader

https://github.com/freshheads/webpack-config-builder/blob/master/lib/adapter/freshheads/LoadReferencedFilesAdapter.ts#L32

Log warnings instead of throw errors when webpack configuration keys are overwriten

...as sometimes the overwriting is intentional.

Example:

see: https://github.com/freshheads/webpack-config-builder/blob/master/lib/adapter/OptimizationAdapter.ts#L25

When a optimization key is already present before applying this adapter, it throws an Error.

Use deep-merge of adapter configurations instead of shallow object spread merge that is being used now

To prevent having to re-suply a complete root key of the configuration when you only want to adjust one specific value in it.

Bind to specific versions of modules/plugins etc.

The configuration is written voor specific versions of the loaders/plugins etc., but are not dependencies of this library. We should either:

• make them hard dependencies of this library
• should check the major versions on usage

(or something else).

Further research is required how to do this.

During execution of production build an error is shown

Below the output during a production deployment for GGZ. It does not actually result in a bad build. It mentions webpack-config-builder, so it might be related.

[frontend] > ggzstandaarden@ prod:build /home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend
[frontend] > NODE_ENV=production webpack
[frontend] 
[frontend] npm ERR! missing: @freshheads/react-form-state@git+ssh://[email protected](opens in new tab)/freshheads/react-form-state.git#semver:^0.2, required by ggzstandaarden@
[frontend] npm ERR! missing: fh-style-standards@git+ssh://[email protected](opens in new tab)/freshheads/style-standards.git#semver:^2.0.0, required by ggzstandaarden@
[frontend] npm ERR! missing: [email protected], required by @freshheads/react-form-state@git+ssh://[email protected](opens in new tab)/freshheads/react-form-state.git#33cf529a12412e38aad8312be0c56a8108051407
[frontend] npm ERR! missing: [email protected], required by fh-style-standards@git+ssh://[email protected](opens in new tab)/freshheads/style-standards.git#877e9be38984aac63ba5e170ac432f373b890f4c
[frontend] Command 'npm list --json --depth=0 --dev=true --prod=true' resulted in an error. Perhaps there are unmet peer dependencies?
[frontend] { Error: Command failed: npm list --json --depth=0 --dev=true --prod=true
[frontend] npm ERR! missing: @freshheads/react-form-state@git+ssh://[email protected](opens in new tab)/freshheads/react-form-state.git#semver:^0.2, required by ggzstandaarden@
[frontend] npm ERR! missing: fh-style-standards@git+ssh://[email protected](opens in new tab)/freshheads/style-standards.git#semver:^2.0.0, required by ggzstandaarden@
[frontend] npm ERR! missing: [email protected], required by @freshheads/react-form-state@git+ssh://[email protected](opens in new tab)/freshheads/react-form-state.git#33cf529a12412e38aad8312be0c56a8108051407
[frontend] npm ERR! missing: [email protected], required by fh-style-standards@git+ssh://[email protected](opens in new tab)/freshheads/style-standards.git#877e9be38984aac63ba5e170ac432f373b890f4c
[frontend] 
[frontend]     at checkExecSyncError (child_process.js:616:11)
[frontend]     at Object.execSync (child_process.js:653:13)
[frontend]     at resolveListOfInstalledRootModules (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/utility/moduleHelper.js:35:41)
[frontend]     at checkIfModuleIsInstalled (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/utility/moduleHelper.js:13:30)
[frontend]     at Object.validateIfRequiredModuleIsInstalled (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/utility/moduleHelper.js:7:10)
[frontend]     at CleanBuildDirectoryAdapter.apply (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/adapter/freshheads/CleanBuildDirectoryAdapter.js:6:24)
[frontend]     at Builder.applyAdapter (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/Builder.js:25:24)
[frontend]     at currentAdapter.apply (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/Builder.js:27:22)
[frontend]     at ResolveAdapter.apply (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/adapter/ResolveAdapter.js:11:9)
[frontend]     at Builder.applyAdapter (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/Builder.js:25:24)
[frontend]     at currentAdapter.apply (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/Builder.js:27:22)
[frontend]     at ModeAdapter.apply (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/adapter/ModeAdapter.js:11:9)
[frontend]     at Builder.applyAdapter (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/Builder.js:25:24)
[frontend]     at currentAdapter.apply (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/Builder.js:27:22)
[frontend]     at TargetAdapter.apply (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/adapter/TargetAdapter.js:11:9)
[frontend]     at Builder.applyAdapter (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/Builder.js:25:24)
[frontend]     at Builder.build (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/Builder.js:36:14)
[frontend]     at DefaultStackAdapter.apply (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/adapter/freshheads/DefaultStackAdapter.js:74:17)
[frontend]     at Builder.applyAdapter (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/Builder.js:25:24)
[frontend]     at currentAdapter^[1.apply (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/Builder.js:27:22)
[frontend]     at OutputAdapter.apply (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/adapter/freshheads/OutputAdapter.js:24:9)
[frontend]     at Builder.applyAdapter (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/Builder.js:25:24)
[frontend]     at currentAdapter.apply (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/Builder.js:27:22)
[frontend]     at EntryAdapter.apply (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/adapter/EntryAdapter.js:11:9)
[frontend]     at Builder.applyAdapter (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/Builder.js:25:24)
[frontend]     at Builder.build (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/@freshheads/webpack-config-builder/build/Builder.js:36:14)
[frontend]     at Object.<anonymous> (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/webpack.config.js:91:24)
[frontend]     at Module._compile (/home/gijsn/www/ggz-zorgstandaarden/prod-2.8.20/assets/frontend/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
[frontend]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
[frontend]     at Module.load (internal/modules/cjs/loader.js:599:32)
[frontend]   status: 1,
[frontend]   signal: null,
[frontend]   output:
[frontend]    [ null,
[frontend]      <Buffer 7b 0a 20 20 22 6e 61 6d 65 22 3a 20 22 67 67 7a 73 74 61 6e 64 61 61 72 64 65 6e 22 2c 0a 20 20 22 70 72 6f 62 6c 65 6d 73 22 3a 20 5b 0a 20 20 20 20 ... >,
[frontend]      <Buffer 6e 70 6d 20 45 52 52 21 20 6d 69 73 73 69 6e 67 3a 20 40 66 72 65 73 68 68 65 61 64 73 2f 72 65 61 63 74 2d 66 6f 72 6d 2d 73 74 61 74 65 40 67 69 74 ... > ],
[frontend]   pid: 4943,
[frontend]   stdout:
[frontend]    <Buffer 7b 0a 20 20 22 6e 61 6d 65 22 3a 20 22 67 67 7a 73 74 61 6e 64 61 61 72 64 65 6e 22 2c 0a 20 20 22 70 72 6f 62 6c 65 6d 73 22 3a 20 5b 0a 20 20 20 20 ... >,
[frontend]   stderr:
[frontend]    <Buffer 6e 70 6d 20 45 52 52 21 20 6d 69 73 73 69 6e 67 3a 20 40 66 72 65 73 68 68 65 61 64 73 2f 72 65 61 63 74 2d 66 6f 72 6d 2d 73 74 61 74 65 40 67 69 74 ... > }

SVGR adapter

Uses https://www.npmjs.com/package/@svgr/webpack

The reason for a adapter is that it should remove svg support from referencedFileAdapter so it does't get picked up by the file-loader before the svgr plugin is loaded.

Custom implementation is as follows:

builder
    .add(
        new EntryAdapter({
            app: [
                path.resolve(__dirname, 'src/scss/app.scss'),
                path.resolve(__dirname, 'src/js/app.js'),
            ],
        })
    )
    .add(new OutputAdapter(outputPath, publicOutputPath))
    .add(new DefaultStackAdapter({
        loadReferencedFiles: {
            enabled: true,
            test: /\.woff2?$|\.ttf$|\.eot$|\.jpe?g$|\.png$|\.gif$/, // remove .svg
        }
    }));

const config = builder.build();

config.module.rules.unshift(
    {
        test: /\.svg$/,
        use: ['@svgr/webpack', 'file-loader'],
    },
);

An adapter could make this implementation more straight forward.