Global

Methods

buildCss(optionsopt) → {Object}

Enable .css file imports and build the CSS with css-loader and mini-css-extract-plugin. When running in production, minify CSS with css-minimizer-webpack-plugin: - https://webpack.js.org/loaders/css-loader - https://webpack.js.org/plugins/css-minimizer-webpack-plugin - https://webpack.js.org/plugins/mini-css-extract-plugin Tested with: - css-loader@^6.8.1 - css-minimizer-webpack-plugin@^6.0.0 - mini-css-extract-plugin@^2.7.6
Parameters:
Name Type Attributes Description
options Object <optional>
Options object that determines how css-loader, css-minimizer-webpack-plugin, and mini-css-extract-plugin will be configured.
Properties
Name Type Attributes Description
cssLoader Object <optional>
css-loader options. (https://webpack.js.org/loaders/css-loader/#options)
cssMinimizer Object <optional>
css-minimizer-webpack-plugin options. (https://webpack.js.org/plugins/css-minimizer-webpack-plugin/#options)
miniCssExtractPlugin Object <optional>
Options for mini-css-extract-plugin. (https://webpack.js.org/plugins/mini-css-extract-plugin/#plugin-options)
miniCssExtractPluginLoader Object <optional>
mini-css-extract-plugin loader options. (https://webpack.js.org/plugins/mini-css-extract-plugin/#loader-options)
minimizer Object <optional>
webpack optimization option's minimizer option. Setting this will override `options.cssMinimizer`. (https://webpack.js.org/configuration/optimization/#optimizationminimizer)
plugins Object <optional>
webpack's plugins option. Setting this will override `options.miniCssExtractPlugin`. (https://webpack.js.org/configuration/plugins)
rule Object <optional>
webpack rule. (https://webpack.js.org/configuration/module/#rule)
Properties
Name Type Attributes Default Description
exclude RegExp <optional>
/node_modules/ Exclude option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleexclude)
include RegExp <optional>
Include option associated with the webpack rule. It is recommended to set this to improve build performance. (https://webpack.js.org/configuration/module/#ruleinclude)
resolve Object <optional>
Resolve option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleresolve)
test RegExp <optional>
/\.css$/ Test option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruletest)
use Object <optional>
webpack UseEntry associated with the webpack rule. Setting this will override most of the default configuration. (https://webpack.js.org/configuration/module/#useentry)
Source:
Returns:
webpack configuration object that sets up css-loader, css-minimizer-webpack-plugin, and mini-css-extract-plugin.
Type
Object

buildHtml(optionsopt) → {Object}

Build the HTML file with HTML Webpack Plugin: https://webpack.js.org/plugins/html-webpack-plugin Tested with: html-webpack-plugin@^5.5.1
Parameters:
Name Type Attributes Description
options Object <optional>
Options for HTML Webpack Plugin. (https://github.com/jantimon/html-webpack-plugin#options)
Source:
Returns:
A webpack configuration object that sets up HTML Webpack Plugin.
Type
Object

buildSass(optionsopt) → {Object}

Enable .sass and .scss file imports and build the CSS with css-loader, mini-css-extract-plugin, and sass-loader. When running in production, minify CSS with css-minimizer-webpack-plugin: - https://webpack.js.org/loaders/css-loader - https://webpack.js.org/plugins/css-minimizer-webpack-plugin - https://webpack.js.org/plugins/mini-css-extract-plugin - https://webpack.js.org/loaders/sass-loader Tested with: - css-loader@^6.8.1 - css-minimizer-webpack-plugin@^6.0.0 - mini-css-extract-plugin@^2.7.6 - sass@~1.64.2 - sass-loader@^13.3.2
Parameters:
Name Type Attributes Description
options Object <optional>
Options object that determines how css-loader, css-minimizer-webpack-plugin, mini-css-extract-plugin, and sass-loader will be configured.
Properties
Name Type Attributes Description
cssLoader Object <optional>
css-loader options. (https://webpack.js.org/loaders/css-loader/#options)
cssMinimizer Object <optional>
css-minimizer-webpack-plugin options. (https://webpack.js.org/plugins/css-minimizer-webpack-plugin/#options)
miniCssExtractPlugin Object <optional>
Options for mini-css-extract-plugin. (https://webpack.js.org/plugins/mini-css-extract-plugin/#plugin-options)
miniCssExtractPluginLoader Object <optional>
mini-css-extract-plugin loader options. (https://webpack.js.org/plugins/mini-css-extract-plugin/#loader-options)
minimizer Object <optional>
webpack optimization option's minimizer option. Setting this will override `options.cssMinimizer`. (https://webpack.js.org/configuration/optimization/#optimizationminimizer)
plugins Object <optional>
webpack's plugins option. Setting this will override `options.miniCssExtractPlugin`. (https://webpack.js.org/configuration/plugins)
rule Object <optional>
webpack rule. (https://webpack.js.org/configuration/module/#rule)
Properties
Name Type Attributes Default Description
exclude RegExp <optional>
/node_modules/ Exclude option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleexclude)
include RegExp <optional>
Include option associated with the webpack rule. It is recommended to set this to improve build performance. (https://webpack.js.org/configuration/module/#ruleinclude)
resolve Object <optional>
Resolve option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleresolve)
test RegExp <optional>
/\.s[ac]ss$/i Test option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruletest)
use Object <optional>
webpack UseEntry associated with the webpack rule. Setting this will override most of the default configuration. (https://webpack.js.org/configuration/module/#useentry)
sassLoader Object <optional>
sass-loader options. (https://webpack.js.org/loaders/sass-loader/#options)
Source:
Returns:
webpack configuration object that sets up css-loader, css-minimizer-webpack-plugin, mini-css-extract-plugin, and sass-loader.
Type
Object

buildSourceMaps(devtool) → {Object}

Build source maps: https://webpack.js.org/configuration/devtool
Parameters:
Name Type Description
devtool string Option that chooses a style of source mapping. (https://webpack.js.org/configuration/devtool)
Source:
Returns:
A webpack configuration object that sets up the webpack devtool option.
Type
Object

buildTransformedCss(optionsopt) → {Object}

Enable .css file imports and build the CSS with css-loader and mini-css-extract-plugin. Enable transformations with postcss-loader. By default, add vendor prefixes with Autoprefixer. When running in production, minify CSS with css-minimizer-webpack-plugin: - https://github.com/postcss/autoprefixer - https://webpack.js.org/loaders/css-loader - https://webpack.js.org/plugins/css-minimizer-webpack-plugin - https://webpack.js.org/plugins/mini-css-extract-plugin - https://webpack.js.org/loaders/postcss-loader Tested with: - autoprefixer@^10.4.16 - css-loader@^6.8.1 - css-minimizer-webpack-plugin@^6.0.0 - mini-css-extract-plugin@^2.7.6 - postcss@^8.4.29 - postcss-loader@^7.3.3
Parameters:
Name Type Attributes Description
options Object <optional>
Options object that determines how Autoprefixer, css-loader, css-minimizer-webpack-plugin, mini-css-extract-plugin, and postcss-loader will be configured.
Properties
Name Type Attributes Description
autoprefixer Object <optional>
Options for Autoprefixer. (https://github.com/postcss/autoprefixer#options)
cssLoader Object <optional>
css-loader options. (https://webpack.js.org/loaders/css-loader/#options)
cssMinimizer Object <optional>
css-minimizer-webpack-plugin options. (https://webpack.js.org/plugins/css-minimizer-webpack-plugin/#options)
miniCssExtractPlugin Object <optional>
Options for mini-css-extract-plugin. (https://webpack.js.org/plugins/mini-css-extract-plugin/#plugin-options)
miniCssExtractPluginLoader Object <optional>
mini-css-extract-plugin loader options. (https://webpack.js.org/plugins/mini-css-extract-plugin/#loader-options)
minimizer Object <optional>
webpack optimization option's minimizer option. Setting this will override `options.cssMinimizer`. (https://webpack.js.org/configuration/optimization/#optimizationminimizer)
plugins Object <optional>
webpack's plugins option. Setting this will override `options.miniCssExtractPlugin`. (https://webpack.js.org/configuration/plugins)
postcssLoader Object <optional>
postcss-loader options. Setting this will override `options.autoprefixer`. (https://webpack.js.org/loaders/postcss-loader/#options)
rule Object <optional>
webpack rule. (https://webpack.js.org/configuration/module/#rule)
Properties
Name Type Attributes Default Description
exclude RegExp <optional>
/node_modules/ Exclude option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleexclude)
include RegExp <optional>
Include option associated with the webpack rule. It is recommended to set this to improve build performance. (https://webpack.js.org/configuration/module/#ruleinclude)
resolve Object <optional>
Resolve option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleresolve)
test RegExp <optional>
/\.css$/ Test option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruletest)
use Object <optional>
webpack UseEntry associated with the webpack rule. Setting this will override most of the default configuration. (https://webpack.js.org/configuration/module/#useentry)
Source:
Returns:
A webpack configuration object that sets up Autoprefixer, css-loader, css-minimizer-webpack-plugin, mini-css-extract-plugin, and postcss-loader.
Type
Object

buildTransformedSass(optionsopt) → {Object}

Enable .sass and .scss file imports and build the CSS with css-loader, mini-css-extract-plugin, and sass-loader. Enable transformations with postcss-loader. By default, add vendor prefixes with Autoprefixer. When running in production, minify CSS with css-minimizer-webpack-plugin: - https://github.com/postcss/autoprefixer - https://webpack.js.org/loaders/css-loader - https://webpack.js.org/plugins/css-minimizer-webpack-plugin - https://webpack.js.org/plugins/mini-css-extract-plugin - https://webpack.js.org/loaders/postcss-loader - https://webpack.js.org/loaders/sass-loader Tested with: - autoprefixer@^10.4.16 - css-loader@^6.8.1 - css-minimizer-webpack-plugin@^6.0.0 - mini-css-extract-plugin@^2.7.6 - postcss@^8.4.29 - postcss-loader@^7.3.3 - sass@~1.64.2 - sass-loader@^13.3.2
Parameters:
Name Type Attributes Description
options Object <optional>
Options object that determines how Autoprefixer, css-loader, css-minimizer-webpack-plugin, mini-css-extract-plugin, postcss-loader, and sass-loader will be configured.
Properties
Name Type Attributes Description
autoprefixer Object <optional>
Options for Autoprefixer. (https://github.com/postcss/autoprefixer#options)
cssLoader Object <optional>
css-loader options. (https://webpack.js.org/loaders/css-loader/#options)
cssMinimizer Object <optional>
css-minimizer-webpack-plugin options. (https://webpack.js.org/plugins/css-minimizer-webpack-plugin/#options)
miniCssExtractPlugin Object <optional>
Options for mini-css-extract-plugin. (https://webpack.js.org/plugins/mini-css-extract-plugin/#plugin-options)
miniCssExtractPluginLoader Object <optional>
mini-css-extract-plugin loader options. (https://webpack.js.org/plugins/mini-css-extract-plugin/#loader-options)
minimizer Object <optional>
webpack optimization option's minimizer option. Setting this will override `options.cssMinimizer`. (https://webpack.js.org/configuration/optimization/#optimizationminimizer)
plugins Object <optional>
webpack's plugins option. Setting this will override `options.miniCssExtractPlugin`. (https://webpack.js.org/configuration/plugins)
postcssLoader Object <optional>
postcss-loader options. Setting this will override `options.autoprefixer`. (https://webpack.js.org/loaders/postcss-loader/#options)
rule Object <optional>
webpack rule. (https://webpack.js.org/configuration/module/#rule)
Properties
Name Type Attributes Default Description
exclude RegExp <optional>
/node_modules/ Exclude option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleexclude)
include RegExp <optional>
Include option associated with the webpack rule. It is recommended to set this to improve build performance. (https://webpack.js.org/configuration/module/#ruleinclude)
resolve Object <optional>
Resolve option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleresolve)
test RegExp <optional>
/\.s[ac]ss$/i Test option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruletest)
use Object <optional>
webpack UseEntry associated with the webpack rule. Setting this will override most of the default configuration. (https://webpack.js.org/configuration/module/#useentry)
sassLoader Object <optional>
sass-loader options. (https://webpack.js.org/loaders/sass-loader/#options)
Source:
Returns:
A webpack configuration object that sets up Autoprefixer, css-loader, css-minimizer-webpack-plugin, mini-css-extract-plugin, postcss-loader, and sass-loader.
Type
Object

compileJs(optionsopt) → {Object}

Compile JavaScript code with babel-loader: https://webpack.js.org/loaders/babel-loader Tested with: - @babel/core@^7.22.1 - @babel/preset-env@^7.22.4 - babel-loader@^9.1.2
Parameters:
Name Type Attributes Description
options Object <optional>
Options object that determines how babel-loader will be configured.
Properties
Name Type Attributes Description
babelLoader Object <optional>
babel-loader options. Setting this will completely override the default Babel configuration. (https://webpack.js.org/loaders/babel-loader/#options)
babelLoaderCache boolean <optional>
babel-loader-specific option that enables the cache when true. (https://webpack.js.org/loaders/babel-loader/#options)
babelLoaderPlugins Object <optional>
Babel plugins. (https://babeljs.io/docs/plugins)
babelLoaderPresets Object <optional>
Babel presets. Setting this will override the default Babel preset configuration. (https://babeljs.io/docs/presets)
babelPresetEnv Object <optional>
Babel's preset-env options. Will be overwritten by `options.babelLoader` if it is set. (https://babeljs.io/docs/babel-preset-env#options)
plugins Object <optional>
webpack's plugins option. (https://webpack.js.org/configuration/plugins)
resolve Object <optional>
webpack's resolve option. (https://webpack.js.org/configuration/resolve)
rule Object <optional>
webpack rule. (https://webpack.js.org/configuration/module/#rule)
Properties
Name Type Attributes Default Description
exclude RegExp <optional>
/node_modules/ Exclude option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleexclude)
include RegExp <optional>
Include option associated with the webpack rule. It is recommended to set this to improve build performance. (https://webpack.js.org/configuration/module/#ruleinclude)
resolve Object <optional>
Resolve option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleresolve)
test RegExp <optional>
/\.js$/ Test option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruletest)
use Object <optional>
webpack UseEntry associated with the webpack rule. Setting this will override most of the default configuration. (https://webpack.js.org/configuration/module/#useentry)
Source:
Returns:
A webpack configuration object that sets up babel-loader.
Type
Object

compileReact(optionsopt, modeopt) → {Object}

Compile React JavaScript code with babel-loader: https://webpack.js.org/loaders/babel-loader Tested with: - @babel/core@^7.22.1 - @babel/preset-env@^7.22.4 - @babel/preset-react@^7.22.3 - babel-loader@^9.1.2
Parameters:
Name Type Attributes Description
options Object <optional>
Options object that determines how babel-loader will be configured.
Properties
Name Type Attributes Description
babelLoader Object <optional>
babel-loader options. Setting this will completely override the default Babel configuration. (https://webpack.js.org/loaders/babel-loader/#options)
babelLoaderCache boolean <optional>
babel-loader-specific option that enables the cache when true. (https://webpack.js.org/loaders/babel-loader/#options)
babelLoaderPlugins Object <optional>
Babel plugins. (https://babeljs.io/docs/plugins)
babelLoaderPresets Object <optional>
Babel presets. Setting this will override the default Babel preset configuration. (https://babeljs.io/docs/presets)
babelPresetEnv Object <optional>
Babel's preset-env options. Will be overwritten by `options.babelLoader` if it is set. (https://babeljs.io/docs/babel-preset-env#options)
babelPresetReact Object <optional>
Babel's preset-react options. Will be overwritten by `options.babelLoader` if it is set. (https://babeljs.io/docs/babel-preset-react#options)
plugins Object <optional>
webpack's plugins option. (https://webpack.js.org/configuration/plugins)
resolve Object <optional>
webpack's resolve option. (https://webpack.js.org/configuration/resolve)
rule Object <optional>
webpack rule. (https://webpack.js.org/configuration/module/#rule)
Properties
Name Type Attributes Default Description
exclude RegExp <optional>
/node_modules/ Exclude option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleexclude)
include RegExp <optional>
Include option associated with the webpack rule. It is recommended to set this to improve build performance. (https://webpack.js.org/configuration/module/#ruleinclude)
resolve Object <optional>
Resolve option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleresolve)
test RegExp <optional>
/\.jsx?$/ Test option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruletest)
use Object <optional>
webpack UseEntry associated with the webpack rule. Setting this will override most of the default configuration. (https://webpack.js.org/configuration/module/#useentry)
mode string <optional>
The webpack mode configuration option. Babel's preset-react will enable behavior specific to development when this is set to "development". (https://webpack.js.org/configuration/mode)
Source:
Returns:
A webpack configuration object that sets up babel-loader.
Type
Object

compileReactTs(optionsopt, modeopt) → {Object}

Compile React TypeScript code with babel-loader and type check with Fork TS Checker Webpack Plugin: - https://webpack.js.org/loaders/babel-loader - https://github.com/TypeStrong/fork-ts-checker-webpack-plugin Tested with: - @babel/core@^7.22.1 - @babel/preset-env@^7.22.4 - @babel/preset-react@^7.22.3 - @babel/preset-typescript@^7.21.5 - babel-loader@^9.1.2 - fork-ts-checker-webpack-plugin@^8.0.0 - typescript@~5.3.3
Parameters:
Name Type Attributes Description
options Object <optional>
Options object that determines how babel-loader and Fork TS Checker Webpack Plugin will be configured.
Properties
Name Type Attributes Description
babelLoader Object <optional>
babel-loader options. Setting this will completely override the default Babel configuration. (https://webpack.js.org/loaders/babel-loader/#options)
babelLoaderCache boolean <optional>
babel-loader-specific option that enables the cache when true. (https://webpack.js.org/loaders/babel-loader/#options)
babelLoaderPlugins Object <optional>
Babel plugins. (https://babeljs.io/docs/plugins)
babelLoaderPresets Object <optional>
Babel presets. Setting this will override the default Babel preset configuration. (https://babeljs.io/docs/presets)
babelPresetEnv Object <optional>
Babel's preset-env options. Will be overwritten by `options.babelLoader` if it is set. (https://babeljs.io/docs/babel-preset-env#options)
babelPresetReact Object <optional>
Babel's preset-react options. Will be overwritten by `options.babelLoader` if it is set. (https://babeljs.io/docs/babel-preset-react#options)
babelPresetTypeScript Object <optional>
Babel's preset-typescript options. Will be overwritten by `options.babelLoader` if it is set. (https://babeljs.io/docs/babel-preset-env#options)
forkTsChecker Object <optional>
Options for Fork TS Checker Webpack Plugin. Will be overwritten by `options.plugins` if it is set. (https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#options)
plugins Object <optional>
webpack's plugins option. Setting this will override `options.forkTsChecker`. (https://webpack.js.org/configuration/plugins)
resolve Object <optional>
webpack's resolve option. (https://webpack.js.org/configuration/resolve)
rule Object <optional>
webpack rule. (https://webpack.js.org/configuration/module/#rule)
Properties
Name Type Attributes Default Description
exclude RegExp <optional>
/node_modules/ Exclude option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleexclude)
include RegExp <optional>
Include option associated with the webpack rule. It is recommended to set this to improve build performance. (https://webpack.js.org/configuration/module/#ruleinclude)
resolve Object <optional>
Resolve option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleresolve)
test RegExp <optional>
/\.[jt]sx?$/ Test option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruletest)
use Object <optional>
webpack UseEntry associated with the webpack rule. Setting this will override most of the default configuration. (https://webpack.js.org/configuration/module/#useentry)
mode string <optional>
The webpack mode configuration option. Babel's preset-react will enable behavior specific to development when this is set to "development". (https://webpack.js.org/configuration/mode)
Source:
Returns:
A webpack configuration object that sets up babel-loader and Fork TS Checker Webpack Plugin.
Type
Object

compileTs(optionsopt) → {Object}

Compile TypeScript code with babel-loader and type check with Fork TS Checker Webpack Plugin: - https://webpack.js.org/loaders/babel-loader - https://github.com/TypeStrong/fork-ts-checker-webpack-plugin Tested with: - @babel/core@^7.22.1 - @babel/preset-env@^7.22.4 - @babel/preset-typescript@^7.21.5 - babel-loader@^9.1.2 - fork-ts-checker-webpack-plugin@^8.0.0 - typescript@~5.3.3
Parameters:
Name Type Attributes Description
options Object <optional>
Options object that determines how babel-loader and Fork TS Checker Webpack Plugin will be configured.
Properties
Name Type Attributes Description
babelLoader Object <optional>
babel-loader options. Setting this will completely override the default Babel configuration. (https://webpack.js.org/loaders/babel-loader/#options)
babelLoaderCache boolean <optional>
babel-loader-specific option that enables the cache when true. (https://webpack.js.org/loaders/babel-loader/#options)
babelLoaderPlugins Object <optional>
Babel plugins. (https://babeljs.io/docs/plugins)
babelLoaderPresets Object <optional>
Babel presets. Setting this will override the default Babel preset configuration. (https://babeljs.io/docs/presets)
babelPresetEnv Object <optional>
Babel's preset-env options. Will be overwritten by `options.babelLoader` if it is set. (https://babeljs.io/docs/babel-preset-env#options)
babelPresetTypeScript Object <optional>
Babel's preset-typescript options. Will be overwritten by `options.babelLoader` if it is set. (https://babeljs.io/docs/babel-preset-env#options)
forkTsChecker Object <optional>
Options for Fork TS Checker Webpack Plugin. Will be overwritten by `options.plugins` if it is set. (https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#options)
plugins Object <optional>
webpack's plugins option. Setting this will override `options.forkTsChecker`. (https://webpack.js.org/configuration/plugins)
resolve Object <optional>
webpack's resolve option. (https://webpack.js.org/configuration/resolve)
rule Object <optional>
webpack rule. (https://webpack.js.org/configuration/module/#rule)
Properties
Name Type Attributes Default Description
exclude RegExp <optional>
/node_modules/ Exclude option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleexclude)
include RegExp <optional>
Include option associated with the webpack rule. It is recommended to set this to improve build performance. (https://webpack.js.org/configuration/module/#ruleinclude)
resolve Object <optional>
Resolve option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleresolve)
test RegExp <optional>
/\.[jt]s$/ Test option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruletest)
use Object <optional>
webpack UseEntry associated with the webpack rule. Setting this will override most of the default configuration. (https://webpack.js.org/configuration/module/#useentry)
Source:
Returns:
A webpack configuration object that sets up babel-loader and Fork TS Checker Webpack Plugin.
Type
Object

ignoreWatch(ignored) → {Object}

Ignore files when webpack is running in watch mode: https://webpack.js.org/configuration/watch
Parameters:
Name Type Description
ignored string | Array.<string> RegEx or globs to match folders and files that will be ignored. (https://webpack.js.org/configuration/watch/#watchoptionsignored)
Source:
Returns:
A webpack configuration object that makes webpack ignore specified files during watch mode.
Type
Object

injectCss(optionsopt) → {Object}

Enable .css file imports and inject CSS into the DOM with css-loader and style-loader: - https://webpack.js.org/loaders/css-loader - https://webpack.js.org/loaders/style-loader Tested with: - css-loader@^6.8.1 - style-loader@^3.3.3
Parameters:
Name Type Attributes Description
options Object <optional>
Options object that determines how css-loader and style-loader will be configured.
Properties
Name Type Attributes Description
cssLoader Object <optional>
css-loader options. (https://webpack.js.org/loaders/css-loader/#options)
rule Object <optional>
webpack rule. (https://webpack.js.org/configuration/module/#rule)
Properties
Name Type Attributes Default Description
exclude RegExp <optional>
/node_modules/ Exclude option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleexclude)
include RegExp <optional>
Include option associated with the webpack rule. It is recommended to set this to improve build performance. (https://webpack.js.org/configuration/module/#ruleinclude)
resolve Object <optional>
Resolve option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleresolve)
test RegExp <optional>
/\.css$/ Test option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruletest)
use Object <optional>
webpack UseEntry associated with the webpack rule. Setting this will override most of the default configuration. (https://webpack.js.org/configuration/module/#useentry)
styleLoader Object <optional>
style-loader options. (https://webpack.js.org/loaders/style-loader/#options)
Source:
Returns:
webpack configuration object that sets up css-loader and style-loader.
Type
Object

injectSass(optionsopt) → {Object}

Enable .sass and .scss file imports and inject CSS into the DOM with css-loader, sass-loader, and style-loader: - https://webpack.js.org/loaders/css-loader - https://webpack.js.org/loaders/sass-loader - https://webpack.js.org/loaders/style-loader Tested with: - css-loader@^6.8.1 - sass@~1.64.2 - sass-loader@^13.3.2 - style-loader@^3.3.3
Parameters:
Name Type Attributes Description
options Object <optional>
Options object that determines how css-loader, sass-loader, and style-loader will be configured.
Properties
Name Type Attributes Description
cssLoader Object <optional>
css-loader options. (https://webpack.js.org/loaders/css-loader/#options)
rule Object <optional>
webpack rule. (https://webpack.js.org/configuration/module/#rule)
Properties
Name Type Attributes Default Description
exclude RegExp <optional>
/node_modules/ Exclude option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleexclude)
include RegExp <optional>
Include option associated with the webpack rule. It is recommended to set this to improve build performance. (https://webpack.js.org/configuration/module/#ruleinclude)
resolve Object <optional>
Resolve option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleresolve)
test RegExp <optional>
/\.s[ac]ss$/i Test option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruletest)
use Object <optional>
webpack UseEntry associated with the webpack rule. Setting this will override most of the default configuration. (https://webpack.js.org/configuration/module/#useentry)
sassLoader Object <optional>
sass-loader options. (https://webpack.js.org/loaders/sass-loader/#options)
styleLoader Object <optional>
style-loader options. (https://webpack.js.org/loaders/style-loader/#options)
Source:
Returns:
webpack configuration object that sets up css-loader, sass-loader, and style-loader.
Type
Object

injectTransformedCss(optionsopt) → {Object}

Enable .css file imports and inject CSS into the DOM with css-loader and style-loader. Enable transformations with postcss-loader. By default, add vendor prefixes with Autoprefixer: - https://github.com/postcss/autoprefixer - https://webpack.js.org/loaders/css-loader - https://webpack.js.org/loaders/postcss-loader - https://webpack.js.org/loaders/style-loader Tested with: - autoprefixer@^10.4.16 - css-loader@^6.8.1 - postcss@^8.4.29 - postcss-loader@^7.3.3 - style-loader@^3.3.3
Parameters:
Name Type Attributes Description
options Object <optional>
Options object that determines how Autoprefixer, css-loader, postcss-loader, and style-loader will be configured.
Properties
Name Type Attributes Description
autoprefixer Object <optional>
Options for Autoprefixer. (https://github.com/postcss/autoprefixer#options)
cssLoader Object <optional>
css-loader options. (https://webpack.js.org/loaders/css-loader/#options)
postcssLoader Object <optional>
postcss-loader options. Setting this will override `options.autoprefixer`. (https://webpack.js.org/loaders/postcss-loader/#options)
rule Object <optional>
webpack rule. (https://webpack.js.org/configuration/module/#rule)
Properties
Name Type Attributes Default Description
exclude RegExp <optional>
/node_modules/ Exclude option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleexclude)
include RegExp <optional>
Include option associated with the webpack rule. It is recommended to set this to improve build performance. (https://webpack.js.org/configuration/module/#ruleinclude)
resolve Object <optional>
Resolve option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleresolve)
test RegExp <optional>
/\.css$/ Test option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruletest)
use Object <optional>
webpack UseEntry associated with the webpack rule. Setting this will override most of the default configuration. (https://webpack.js.org/configuration/module/#useentry)
styleLoader Object <optional>
style-loader options. (https://webpack.js.org/loaders/style-loader/#options)
Source:
Returns:
webpack configuration object that sets up Autoprefixer, css-loader, postcss-loader, and style-loader.
Type
Object

injectTransformedSass(optionsopt) → {Object}

Enable .css file imports and inject CSS into the DOM with css-loader, sass-loader, and style-loader. Enable transformations with postcss-loader. By default, add vendor prefixes with Autoprefixer: - https://github.com/postcss/autoprefixer - https://webpack.js.org/loaders/css-loader - https://webpack.js.org/loaders/postcss-loader - https://webpack.js.org/loaders/sass-loader - https://webpack.js.org/loaders/style-loader Tested with: - autoprefixer@^10.4.16 - css-loader@^6.8.1 - postcss@^8.4.29 - postcss-loader@^7.3.3 - sass@~1.64.2 - sass-loader@^13.3.2 - style-loader@^3.3.3
Parameters:
Name Type Attributes Description
options Object <optional>
Options object that determines how Autoprefixer, css-loader, postcss-loader, sass-loader, and style-loader will be configured.
Properties
Name Type Attributes Description
autoprefixer Object <optional>
Options for Autoprefixer. (https://github.com/postcss/autoprefixer#options)
cssLoader Object <optional>
css-loader options. (https://webpack.js.org/loaders/css-loader/#options)
postcssLoader Object <optional>
postcss-loader options. Setting this will override `options.autoprefixer`. (https://webpack.js.org/loaders/postcss-loader/#options)
rule Object <optional>
webpack rule. (https://webpack.js.org/configuration/module/#rule)
Properties
Name Type Attributes Default Description
exclude RegExp <optional>
/node_modules/ Exclude option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleexclude)
include RegExp <optional>
Include option associated with the webpack rule. It is recommended to set this to improve build performance. (https://webpack.js.org/configuration/module/#ruleinclude)
resolve Object <optional>
Resolve option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleresolve)
test RegExp <optional>
/\.css$/ Test option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruletest)
use Object <optional>
webpack UseEntry associated with the webpack rule. Setting this will override most of the default configuration. (https://webpack.js.org/configuration/module/#useentry)
sassLoader Object <optional>
sass-loader options. (https://webpack.js.org/loaders/sass-loader/#options)
styleLoader Object <optional>
style-loader options. (https://webpack.js.org/loaders/style-loader/#options)
Source:
Returns:
webpack configuration object that sets up Autoprefixer, css-loader, postcss-loader, sass-loader, and style-loader.
Type
Object

loadFonts(optionsopt)

Enable imports of font files (.eot, .otf, .ttf, .woff, .woff2) with an asset module: https://webpack.js.org/guides/asset-modules
Parameters:
Name Type Attributes Description
options Object <optional>
Options object that determines how the asset module will be configured.
Properties
Name Type Attributes Description
rule Object <optional>
webpack rule. (https://webpack.js.org/configuration/module/#rule)
Properties
Name Type Attributes Default Description
test RegExp <optional>
/\.(eot|otf|ttf|woff|woff2)$/i Test option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruletest)
type string <optional>
asset/resource Option that determines the type of asset module to use. (https://webpack.js.org/configuration/module/#ruletype)
Source:
Returns:
webpack configuration object that sets up an asset module to support fonts.

loadImages(optionsopt)

Enable imports of image files (.gif, .jpeg, .jpg, .png, .svg) with an asset module: https://webpack.js.org/guides/asset-modules
Parameters:
Name Type Attributes Description
options Object <optional>
Options object that determines how the asset module will be configured.
Properties
Name Type Attributes Description
rule Object <optional>
webpack rule. (https://webpack.js.org/configuration/module/#rule)
Properties
Name Type Attributes Default Description
test RegExp <optional>
/\.(gif|jpeg|jpg|png|svg)$/i Test option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruletest)
type string <optional>
asset/resource Option that determines the type of asset module to use. (https://webpack.js.org/configuration/module/#ruletype)
Source:
Returns:
webpack configuration object that sets up an asset module to support images.

removeUnusedCss(options) → {Object}

Remove unused CSS with purgecss-webpack-plugin: https://purgecss.com/plugins/webpack.html Tested with: purgecss-webpack-plugin@^5.0.0
Parameters:
Name Type Description
options Object Options for purgecss-webpack-plugin. (https://purgecss.com/plugins/webpack.html#options)
Source:
Returns:
A webpack configuration object that sets up purgecss-webpack-plugin.
Type
Object

setupDevServer(optionsopt) → {Object}

Configure webpack-dev-server: https://webpack.js.org/configuration/dev-server Tested with: webpack-dev-server@^5.0.4
Parameters:
Name Type Attributes Description
options Object <optional>
Options for webpack-dev-server. (https://webpack.js.org/configuration/dev-server/#devserver)
Source:
Returns:
A webpack configuration object that sets up webpack-dev-server.
Type
Object

setupNodeExternals(optionsopt) → {Object}

Exclude node_modules from the build with webpack node modules externals: https://github.com/liady/webpack-node-externals Tested with: webpack-node-externals@^3.0.0
Parameters:
Name Type Attributes Description
options Object <optional>
Options for Webpack node modules externals. (https://github.com/liady/webpack-node-externals#configuration)
Source:
Returns:
A webpack configuration object that sets up Webpack node modules externals.
Type
Object

setupReactFastRefreshServer(optionsopt, modeopt) → {Object}

Setup webpack-dev-server and babel-loader to handle React JavaScript code. Also setup Fast Refresh with React Refresh Webpack Plugin. - https://webpack.js.org/loaders/babel-loader - https://webpack.js.org/configuration/dev-server - https://github.com/pmmmwh/react-refresh-webpack-plugin Tested with: - @babel/core@^7.22.1 - @babel/preset-env@^7.22.4 - @babel/preset-react@^7.22.3 - @pmmmwh/react-refresh-webpack-plugin@^0.5.11 - babel-loader@^9.1.2 - react-refresh@^0.14.0 - webpack-dev-server@^5.0.4
Parameters:
Name Type Attributes Default Description
options Object <optional>
Options object that determines how babel-loader, React Refresh Webpack Plugin, and webpack-dev-server will be configured.
Properties
Name Type Attributes Description
babelLoader Object <optional>
babel-loader options. Setting this will completely override the default Babel configuration. (https://webpack.js.org/loaders/babel-loader/#options)
babelLoaderCache boolean <optional>
babel-loader-specific option that enables the cache when true. (https://webpack.js.org/loaders/babel-loader/#options)
babelLoaderPlugins Object <optional>
Babel plugins. (https://babeljs.io/docs/plugins)
babelLoaderPresets Object <optional>
Babel presets. Setting this will override the default Babel preset configuration. (https://babeljs.io/docs/presets)
babelPresetEnv Object <optional>
Babel's preset-env options. Will be overwritten by `options.babelLoader` if it is set. (https://babeljs.io/docs/babel-preset-env#options)
babelPresetReact Object <optional>
Babel's preset-react options. Will be overwritten by `options.babelLoader` if it is set. (https://babeljs.io/docs/babel-preset-react#options)
devServer Object <optional>
Options for webpack-dev-server. (https://webpack.js.org/configuration/dev-server/#devserver)
plugins Object <optional>
webpack's plugins option. (https://webpack.js.org/configuration/plugins)
reactRefreshWebpackPlugin Object <optional>
Options for React Refresh Webpack Plugin. (https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/API.md)
resolve Object <optional>
webpack's resolve option. (https://webpack.js.org/configuration/resolve)
rule Object <optional>
webpack rule. (https://webpack.js.org/configuration/module/#rule)
Properties
Name Type Attributes Default Description
exclude RegExp <optional>
/node_modules/ Exclude option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleexclude)
include RegExp <optional>
Include option associated with the webpack rule. It is recommended to set this to improve build performance. (https://webpack.js.org/configuration/module/#ruleinclude)
resolve Object <optional>
Resolve option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleresolve)
test RegExp <optional>
/\.jsx?$/ Test option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruletest)
use Object <optional>
webpack UseEntry associated with the webpack rule. Setting this will override most of the default configuration. (https://webpack.js.org/configuration/module/#useentry)
mode string <optional>
development The webpack mode configuration option. Babel's preset-react will enable behavior specific to development when this is set to "development". (https://webpack.js.org/configuration/mode)
Source:
Returns:
A webpack configuration object that sets up babel-loader, React Refresh Webpack Plugin, and webpack-dev-server.
Type
Object

setupReactFastRefreshServerTs(optionsopt, modeopt) → {Object}

Setup webpack-dev-server and babel-loader to handle React JavaScript code. Also setup Fast Refresh with React Refresh Webpack Plugin and type check with Fork TS Checker Webpack Plugin: - https://webpack.js.org/loaders/babel-loader - https://webpack.js.org/configuration/dev-server - https://github.com/TypeStrong/fork-ts-checker-webpack-plugin - https://github.com/pmmmwh/react-refresh-webpack-plugin Tested with: - @babel/core@^7.22.1 - @babel/preset-env@^7.22.4 - @babel/preset-react@^7.22.3 - @babel/preset-typescript@^7.21.5 - @pmmmwh/react-refresh-webpack-plugin@^0.5.11 - babel-loader@^9.1.2 - fork-ts-checker-webpack-plugin@^8.0.0 - react-refresh@^0.14.0 - typescript@~5.3.3 - webpack-dev-server@^5.0.4
Parameters:
Name Type Attributes Default Description
options Object <optional>
Options object that determines how babel-loader, Fork TS Checker Webpack Plugin, React Refresh Webpack Plugin, and webpack-dev-server will be configured.
Properties
Name Type Attributes Description
babelLoader Object <optional>
babel-loader options. Setting this will completely override the default Babel configuration. (https://webpack.js.org/loaders/babel-loader/#options)
babelLoaderCache boolean <optional>
babel-loader-specific option that enables the cache when true. (https://webpack.js.org/loaders/babel-loader/#options)
babelLoaderPlugins Object <optional>
Babel plugins. (https://babeljs.io/docs/plugins)
babelLoaderPresets Object <optional>
Babel presets. Setting this will override the default Babel preset configuration. (https://babeljs.io/docs/presets)
babelPresetEnv Object <optional>
Babel's preset-env options. Will be overwritten by `options.babelLoader` if it is set. (https://babeljs.io/docs/babel-preset-env#options)
babelPresetReact Object <optional>
Babel's preset-react options. Will be overwritten by `options.babelLoader` if it is set. (https://babeljs.io/docs/babel-preset-react#options)
devServer Object <optional>
Options for webpack-dev-server. (https://webpack.js.org/configuration/dev-server/#devserver)
forkTsChecker Object <optional>
Options for Fork TS Checker Webpack Plugin. By default it overrides TSConfig's exclude option to ignore tests. Will be overwritten by `options.plugins` if it is set. (https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#options)
plugins Object <optional>
webpack's plugins option. Setting this will override `options.forkTsChecker` and `options.reactRefreshWebpackPlugin`. (https://webpack.js.org/configuration/plugins)
reactRefreshWebpackPlugin Object <optional>
Options for React Refresh Webpack Plugin. (https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/API.md)
resolve Object <optional>
webpack's resolve option. (https://webpack.js.org/configuration/resolve)
rule Object <optional>
webpack rule. (https://webpack.js.org/configuration/module/#rule)
Properties
Name Type Attributes Default Description
exclude RegExp <optional>
/node_modules/ Exclude option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleexclude)
include RegExp <optional>
Include option associated with the webpack rule. It is recommended to set this to improve build performance. (https://webpack.js.org/configuration/module/#ruleinclude)
resolve Object <optional>
Resolve option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruleresolve)
test RegExp <optional>
/\.jsx?$/ Test option associated with the webpack rule. (https://webpack.js.org/configuration/module/#ruletest)
use Object <optional>
webpack UseEntry associated with the webpack rule. Setting this will override most of the default configuration. (https://webpack.js.org/configuration/module/#useentry)
mode string <optional>
development The webpack mode configuration option. Babel's preset-react will enable behavior specific to development when this is set to "development". (https://webpack.js.org/configuration/mode)
Source:
Returns:
A webpack configuration object that sets up babel-loader, Fork TS Checker Webpack Plugin, React Refresh Webpack Plugin, and webpack-dev-server.
Type
Object