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
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
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
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
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