Configurable and easy to use webpack 4 config for nitro projects.
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;
No loader rule is enabled by default. Activate following prepared rules you need in options.rules
- Type: boolean || object
- default: false
- file types: js, jsx, mjs
Config:
-
true
or{}
activates JavaScript support
- Type: boolean
- default: false
- file types: ts, tsx
Config:
-
true
will activate TypeScript support
- 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 withsilenceDeprecations: [...]
)
- 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
- 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
- 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.
- 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
Enable some additional features
- 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
- Type: boolean
- default: false
true
will add the bundleAnalyser plugin and opens a browser window with the stats
- 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.
- 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}
)
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.
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
Recent changes can be viewed on Github on the Releases Page