Nitro Webpack

Configurable and easy to use webpack 4 config for nitro projects.

Usage

``
const options = {
rules: {
js: true,
ts: false,
scss: true,
hbs: true,
woff: true,
font: false,
image: true,
},
features: {
banner: true,
bundleAnalyzer: false,
theme: false,
dynamicAlias: false,
},
};
const webpackConfig = require('@nitro/webpack/webpack-config/webpack.config.dev')(options);

module.exports = webpackConfig;
`

Configuration

$3

No loader rule is enabled by default. Activate following prepared rules you need in options.rules

#### options.rules.js

- Type: boolean || object
- default: false
- file types: js, jsx, mjs

Config:

- true or {} activates JavaScript support

#### options.rules.ts

- Type: boolean
- default: false
- file types: ts, tsx

Config:

- true will activate TypeScript support

#### options.rules.scss

- Type: boolean || object
- default: false
- file types: scss, css

Config:

- true or {} will activate scss support
- { publicPath: '../' } provide a separate public path for stylesheets. By default, webpack uses the value from 'output.publicPath'. (only relevant for production build)
- { implementation: require('node-sass') } gives the possibility to use 'node-sass' as sass implementation. (you have to add 'node-sass' as a dev-dependency in your project)
- { sassOptions: { ... } } gives the possibility to add options for the 'dart-sass' or 'node-sass' implementation (e.g. ignore some deprecations for dart-sass with silenceDeprecations: [...])

#### options.rules.hbs

- Type: boolean || object
- default: false
- file types: hbs

Config:

- true or {} will activate handlebars precompiled templates support
- { include: [] } additionally adds include config to rule
- { exclude: [] } additionally adds exclude config to rule

#### options.rules.woff

- Type: boolean || object
- default: false
- file types: woff, woff2

Config:

- true or {} will activate woff font support (in CSS files)
- { include: [] } additionally adds include config to rule
- { exclude: [] } additionally adds exclude config to rule

#### options.rules.font

- type: boolean || object
- default: false
- file types: eot, svg, ttf, woff, woff2

Config:

- true or {} will activate font support for eot, svg, ttf, woff & woff2 fonts (in CSS files)
- { include: [] } additionally adds include config to rule
- { exclude: [] } additionally adds exclude config to rule

⚠ Please use this rule with care. You have to configure includes and exclude when you also use woff and/or image loader.
Otherwise, svg or woff files are processed with multiple configurations.

#### options.rules.image

- Type: boolean || object
- default: false
- file types: png, jpg, gif, svg

Config:

- true will activate image support
- { include: [] } additionally adds include config to rule
- { exclude: [] } additionally adds exclude config to rule

$3

Enable some additional features

#### options.features.banner

- Type: boolean
- default: true

(only relevant for production build)

true will add a text banner with infos from package.json to the bundled js & css

#### options.features.bundleAnalyzer

- Type: boolean
- default: false

true will add the bundleAnalyser plugin and opens a browser window with the stats

#### options.features.theme

- Type: string || false
- default: false

A string will activate theming support:

- webpack uses ./src/ui.${theme} as entrypoint (instead of ./src/ui)
- a subfolder within assets is used for the output path and publicPath (/assets/${theme}/)

It makes sense to use a dynamic value e.g. an environment variable, as shown in the example configuration.

#### options.features.dynamicAlias

- Type: object || false
- default: false

A proper configured dynamicAlias feature will activate the DynamicAliasResolverPlugin
which can change import paths in source files dynamically on compile time as desired.

Properties:

- options.features.dynamicAlias.search (string || RegExp)
search term to be replaced (e.g. '/theme/light')
- options.features.dynamicAlias.replace (string)
string as replacement (e.g. /theme/${theme})

Extending Configuration

$3

By default, all js imports from 'node_modules' are extracted to a 'vendors.js' to use in your view files.

Dynamically imported js files will be extracted to public/js/dynamic/.
You may use them in a promise chain.

`js
import('package-name').then((pack) => {
// do something with 'pack'
});

import(
/ webpackChunkName: "mychunk" / 'package-name'
).then((pack) => {
// do something with 'pack'
});
`

You may change the default configuration in webpackConfig.optimization.splitChunks`

Changelog

Recent changes can be viewed on Github on the Releases Page