@dr.pogodin/react-utils 1.26.0 → 1.26.2

package/config/webpack/app-base.js

@@ -0,0 +1,313 @@
+"use strict";
+/**
+ * @category Configs
+ * @module webpack/app-base
+ * @desc
+ * Base [Webpack](https://webpack.js.org/) configuration for apps.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const sitemap_1 = __importDefault(require("sitemap"));
+const lodash_1 = require("lodash");
+const autoprefixer_1 = __importDefault(require("autoprefixer"));
+const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
+const node_forge_1 = __importDefault(require("node-forge"));
+const webpack_1 = require("webpack");
+const workbox_webpack_plugin_1 = __importDefault(require("workbox-webpack-plugin"));
+const utils_1 = require("@dr.pogodin/babel-plugin-react-css-modules/utils");
+/**
+ * Creates a new Webpack config object, and performs some auxiliary operations
+ * on the way.
+ * @param {object} ops Configuration params. This allows to modify some
+ * frequently changed options in a convenient way, without a need to manipulate
+ * directly with the created config object.
+ * @param {string} ops.babelEnv Babel environment to use for the Babel
+ * compilation step.
+ * @param {object} [ops.babelLoaderOptions] Overrides for default Babel options
+ * of JSX and SVG files loader.
+ * @param ops.context Base URL for resolution of relative config paths.
+ * @param {string} [ops.cssLocalIdent=hash:base64:6] The template for
+ * CSS classnames generation by the Webpack's `css-loader`; it is passed into
+ * the `localIdentName` param of the loader. It should match the corresponding
+ * setting in the Babel config.
+ * @param {boolean} [ops.dontEmitBuildInfo] If set the `.build-info` file won't
+ * be created at the disk during the compilation.
+ * @param [ops.dontUseProgressPlugin] Set to not include progress
+ *  plugin.
+ * @param {string|string[]} ops.entry Entry points for "main" chunk. The config
+ * will prepend them by some necessary polyfills, e.g.:
+ * ([babel-polyfill](https://babeljs.io/docs/usage/polyfill/),
+ * [nodelist-foreach-polyfill](https://www.npmjs.com/package/nodelist-foreach-polyfill)).
+ * @param {boolean|object} ops.workbox If evaluates to a truthy value,
+ * [Workbox's InjectManifest plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#injectmanifest_plugin)
+ * is added to the array of Webpack plugins, to generate service worker for
+ * browser. If the value is an object, it is merged into the options passed
+ * into the plugin, otherwise default options are used:
+ * ```json
+ * {
+ *   "importWorkboxFrom": "local",
+ *   "swSrc": "@dr.pogodin/react-utils/config/workbox/default.js",
+ *   "swDest": "__service-worker.js"
+ * }
+ * ```
+ * If service worker is generated by this option, it will be automatically
+ * initiated at the client side by the standard
+ * [client-side initialization script](docs/client.md)
+ * provided by **@dr.pogodin/react-utils**. Note that `swDest`'s value cannot be
+ * overriden by config options provided via `workbox` object.
+ * @param {object} [ops.fs] Filesystem to use instead of the Node's FS.
+ * @param {boolean|object} [ops.keepBuildInfo] If `true` and a `.build-info`
+ *  file from a previous build exists in the context directory, it will be
+ *  loaded and used, rather than re-generated by the config factory. It allows
+ *  to re-create the Webpack config during a server launch without re-generation
+ *  of the build info file created during a previous build (and thus bundled
+ *  into the frontend bundle). If an object is provided, it will be used as
+ *  the build info, instead of trying to load it from the filesystem. This
+ *  feature is intended for testing context.
+ * @param {string} ops.mode
+ * [Webpack mode](https://webpack.js.org/concepts/mode/).
+ * @param {string} [ops.outputPath=build] Optional. Output path for the build.
+ * @param {string} ops.publicPath Base URL for the output of the build assets.
+ * @param {string} [ops.sitemap] The path to JS or JSON config for sitemap.
+ * It can be relative to the context, and can be a factory, which returns
+ * the config. The config should be compatible with
+ * [`sitemap`](https://www.npmjs.com/package/sitemap) library, and if
+ * provided the Webpack config factory will use it to gererate `sitemap.xml`
+ * file in the output folder, and then serve it from the app root.
+ * @return The generated config will opt to:
+ * - Bundle the font assets (EOF, OTF, SVG, TTF, WOFF, WOFF2 files from
+ *   the `src/assets/fonts` folder of your source code will be bundled
+ *   and output into the `[PUBLIC_PATH]/fonts` folder);
+ * - Bundle image assets (GIF, JPEG, JPG, PNG files from any folder of
+ *   your source code will be bundled and output into the
+ *   `[PUBLIC_PATH]/images` folder);
+ * - Bundle SCSS files from any folder of your source code, beside
+ *   `node_modules` and its subfolders. The files will be compiled,
+ *    bundled and extracted into the `[PUBLIC_PATH]/[CHUNK_NAME].css`
+ *    bundles;
+ * - Bundle CSS files from any folder of your code. The files will be
+ *   bundled and extracted into the `[PUBLIC_PATH]/[CHUNK_NAME].css`
+ *   bundles;
+ * - Bundle JS, JSX, and SVG files; they will be compiled into the
+ *   `[PUBLIC_PATH]/[CHUNK_NAME].js` bundles, using the Babel environment
+ *   specified in the factory options, and
+ *   [`config/babel/webpack`](./babel-config.js#webpack) config.
+ *
+ * - The following path aliases will be automatically set:
+ * - **`assets`** for `[CONTEXT]/src/assets`;
+ * - **`components`** for `[CONTEXT]/src/shared/components`;
+ * - **`fonts`** for `[CONTEXT]/src/assets/fonts`;
+ * - **`styles`** for `[CONTEXT]/src/styles`.
+ *
+ * Also `resolve.symlinks` Webpack option is set to *false* to avoid problems
+ * with resolution of assets from packages linked with `npm link`.
+ *
+ * - The following global variables will be emulated inside the output
+ *   JS bundle:
+ *   - **`BUILD_RNDKEY`** — A random 32 bit key that can be used
+ *     for encryption, it is set just as a global variable accessible in
+ *     the code;
+ *   - **`BUILD_TIMESTAMP`** — UTC timestamp of the beginning of
+ *     the build;
+ *   - **`FRONT_END`** — It will be set *true* inside the bundle,
+ *     so that shared code can use it to determine that it is executed
+ *     at the client side.
+ *
+ * - It also opts to polyfill the `__dirname` global variable,
+ *   and to ignore imports of the `fs` Node package;
+ *
+ * - Also, it will store to the disk (re-writes if exists) the file
+ *   `[CONTEXT]/.build-info` which will contain a stringified JSON
+ *   object with the following fields:
+ *   - **`rndkey`** — The value set for `BUILD_RNDKEY`;
+ *   - **`timestamp`** — The value set for `BUILD_TIMESTAMP`.
+ */
+function configFactory(ops) {
+    const o = (0, lodash_1.defaults)((0, lodash_1.clone)(ops), {
+        babelLoaderOptions: {},
+        cssLocalIdent: '[hash:base64:6]',
+        outputPath: 'build/web-public',
+        publicPath: '',
+    });
+    const fs = ops.fs || fs_1.default;
+    /* TODO: This works in practice, but being async and not awaited it is a bad
+     * pattern. */
+    if (o.sitemap) {
+        const sitemapUrl = path_1.default.resolve(o.context, o.sitemap);
+        /* eslint-disable global-require, import/no-dynamic-require */
+        let source = require(sitemapUrl);
+        if ((0, lodash_1.isFunction)(source))
+            source = source();
+        /* eslint-enable global-require, import/no-dynamic-require */
+        const sm = new sitemap_1.default.SitemapStream();
+        source.forEach((item) => sm.write(item));
+        sm.end();
+        sitemap_1.default.streamToPromise(sm).then((sitemap) => {
+            const outUrl = path_1.default.resolve(o.context, o.outputPath);
+            if (!fs.existsSync(outUrl))
+                fs.mkdirSync(outUrl);
+            fs.writeFileSync(path_1.default.resolve(o.context, o.outputPath, 'sitemap.xml'), sitemap);
+        });
+    }
+    // TODO: Once all assets are named by hashes, we probably don't need build
+    // info anymore beside the key, which can be merged into stats object?
+    // On the other hand, it is still handy to have to pass around the build
+    // timestamp, and any other similar information to the actual app, so it
+    // can be used in some scenarious.
+    let buildInfo;
+    const buildInfoUrl = path_1.default.resolve(o.context, '.build-info');
+    if (o.keepBuildInfo) {
+        // If "true" - attempt to load from the filesystem.
+        if (o.keepBuildInfo === true) {
+            if (fs.existsSync(buildInfoUrl)) {
+                buildInfo = JSON.parse(fs.readFileSync(buildInfoUrl, 'utf8'));
+            }
+            // Otherwise we assume .keepBuildInfo value itself is the build info object
+            // to use in the build.
+        }
+        else
+            buildInfo = o.keepBuildInfo;
+    }
+    // Even if "keepBuildInfo" option was provided, we still generate a new
+    // build info object in case nothing could be loaded.
+    if (!buildInfo) {
+        buildInfo = Object.freeze({
+            /* A random 32-bit key, that can be used for encryption. */
+            key: node_forge_1.default.random.getBytesSync(32),
+            /* Public path used during build. */
+            publicPath: o.publicPath,
+            /* `true` if client-side code should setup a service worker. */
+            useServiceWorker: Boolean(o.workbox),
+            // Build timestamp.
+            timestamp: new Date().toISOString(),
+        });
+    }
+    // If not opted-out, we write the build info to the filesystem. We also attach
+    // it to the factory function itself, so it can be easily accessed right after
+    // the factory call in testing scenarios.
+    if (!o.dontEmitBuildInfo) {
+        // Note: this is needed if "fs" option is provided, to ensure the factory
+        // does not crash if the folder is not created in that filesystem.
+        fs.mkdirSync(o.context, { recursive: true });
+        fs.writeFileSync(buildInfoUrl, JSON.stringify(buildInfo));
+    }
+    /* Entry points normalization. */
+    const entry = [
+        'core-js/stable',
+        'regenerator-runtime/runtime',
+        'nodelist-foreach-polyfill',
+        ...Array.isArray(o.entry) ? o.entry : [o.entry],
+    ];
+    const plugins = [
+        new webpack_1.DefinePlugin({ BUILD_INFO: JSON.stringify(buildInfo) }),
+    ];
+    if (!ops.dontUseProgressPlugin)
+        plugins.push(new webpack_1.ProgressPlugin());
+    /* Adds InjectManifest plugin from WorkBox, if opted to. */
+    if (o.workbox) {
+        if (!(0, lodash_1.isObject)(o.workbox))
+            o.workbox = {};
+        plugins.push(new workbox_webpack_plugin_1.default.InjectManifest(Object.assign(Object.assign({ swSrc: path_1.default.resolve(__dirname, '../workbox/default.js') }, o.workbox), { swDest: '__service-worker.js' })));
+    }
+    return {
+        context: o.context,
+        entry,
+        node: {
+            __dirname: true,
+        },
+        mode: o.mode,
+        output: {
+            chunkFilename: '[contenthash].js',
+            filename: '[contenthash].js',
+            path: path_1.default.resolve(__dirname, o.context, o.outputPath),
+            publicPath: `${o.publicPath}/`,
+        },
+        plugins,
+        resolve: {
+            alias: {
+                // Aliases to JS an JSX files are handled by Babel.
+                assets: path_1.default.resolve(o.context, 'src/assets'),
+                components: path_1.default.resolve(o.context, 'src/shared/components'),
+                fonts: path_1.default.resolve(o.context, 'src/assets/fonts'),
+                styles: path_1.default.resolve(o.context, 'src/styles'),
+            },
+            extensions: [
+                '.ts',
+                '.tsx',
+                '.js',
+                '.jsx',
+                '.json',
+                '.scss',
+            ],
+            symlinks: false,
+        },
+        module: {
+            rules: [{
+                    /* Loads font resources from "src/assets/fonts" folder. */
+                    test: /\.(eot|otf|svg|ttf|woff2?)$/,
+                    include: [
+                        /node_modules/,
+                        /src[/\\]assets[/\\]fonts/,
+                    ],
+                    type: 'asset/resource',
+                    generator: {
+                        filename: 'fonts/[contenthash][ext][query]',
+                    },
+                }, {
+                    /* Loads JS and JSX moudles, and inlines SVG assets. */
+                    test: ops.typescript ? /\.((j|t)sx?|svg)$/ : /\.(jsx?|svg)$/,
+                    exclude: [/node_modules/],
+                    loader: 'babel-loader',
+                    options: Object.assign({ babelrc: false, configFile: false, envName: o.babelEnv, presets: [['@dr.pogodin/react-utils/config/babel/webpack', {
+                                    typescript: ops.typescript,
+                                }]] }, o.babelLoaderOptions),
+                }, {
+                    /* Loads image assets. */
+                    test: /\.(gif|jpe?g|png)$/,
+                    type: 'asset/resource',
+                    generator: {
+                        filename: 'images/[contenthash][ext][query]',
+                    },
+                }, {
+                    /* Loads SCSS stylesheets. */
+                    test: /\.scss$/,
+                    use: [
+                        mini_css_extract_plugin_1.default.loader, {
+                            loader: 'css-loader',
+                            options: {
+                                modules: {
+                                    getLocalIdent: utils_1.getLocalIdent,
+                                    localIdentName: o.cssLocalIdent,
+                                },
+                            },
+                        }, {
+                            loader: 'postcss-loader',
+                            options: {
+                                postcssOptions: {
+                                    plugins: [autoprefixer_1.default],
+                                },
+                            },
+                        }, 'resolve-url-loader', {
+                            loader: 'sass-loader',
+                            options: {
+                                sourceMap: true,
+                            },
+                        },
+                    ],
+                }, {
+                    /* Loads CSS stylesheets. It is assumed that CSS stylesheets come only
+                    * from dependencies, as we use SCSS inside our own code. */
+                    test: /\.css$/,
+                    use: [
+                        mini_css_extract_plugin_1.default.loader,
+                        'css-loader',
+                    ],
+                }],
+        },
+    };
+}
+exports.default = configFactory;

package/config/webpack/app-development.d.ts

@@ -0,0 +1,13 @@
+import webpack from 'webpack';
+import { type OptionsT as BaseOptionsT } from './app-base';
+type OptionsT = BaseOptionsT & {
+    dontUseHmr?: boolean;
+    dontUseReactGlobalStateDebugging?: boolean;
+};
+/**
+ * @param ops
+ * @param [ops.dontUseReactGlobalStateDebugging]
+ * @param [ops.dontUseHmr]
+ */
+export default function configFactory(ops: OptionsT): webpack.Configuration;
+export {};

package/config/webpack/app-development.js

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * @category Configs
+ * @module webpack/app-development
+ * @desc development Webpack configuration for applications.
+ */
+const lodash_1 = require("lodash");
+const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
+const react_refresh_webpack_plugin_1 = __importDefault(require("@pmmmwh/react-refresh-webpack-plugin"));
+const webpack_1 = __importDefault(require("webpack"));
+const webpack_merge_1 = require("webpack-merge");
+const app_base_1 = __importDefault(require("./app-base"));
+/**
+ * @param ops
+ * @param [ops.dontUseReactGlobalStateDebugging]
+ * @param [ops.dontUseHmr]
+ */
+function configFactory(ops) {
+    const o = (0, lodash_1.defaults)((0, lodash_1.clone)(ops), {
+        cssLocalIdent: '[package]___[path][name]___[local]___[hash:base64:6]',
+    });
+    const entry = ['@dr.pogodin/react-utils/build/development/client/init'];
+    if (!o.dontUseHmr)
+        entry.push('webpack-hot-middleware/client?reload=true');
+    entry.push(...Array.isArray(o.entry) ? o.entry : [o.entry]);
+    const plugins = [
+        new mini_css_extract_plugin_1.default({
+            chunkFilename: '[id].css',
+            filename: '[id].css',
+        }),
+        new webpack_1.default.DefinePlugin({
+            'process.env.BABEL_ENV': JSON.stringify('development'),
+            'process.env.DEV_TOOLS': JSON.stringify(true),
+            'process.env.NODE_ENV': JSON.stringify('development'),
+            'process.env.REACT_GLOBAL_STATE_DEBUG': JSON.stringify(!o.dontUseReactGlobalStateDebugging),
+        }),
+    ];
+    // TODO: There should be no reason to include these plugins when HMR is opted
+    // out, however if I remove them, the compilation fails with obscure
+    // "ReferenceError: $RefreshReg$ is not defined" error. For now it seems
+    // fine to keep these plugins anyway, thus the shortcut of "if" condition
+    // below.
+    if (true || !o.dontUseHmr) {
+        plugins.push(new webpack_1.default.HotModuleReplacementPlugin(), new react_refresh_webpack_plugin_1.default({
+            overlay: {
+                sockIntegration: 'whm',
+            },
+        }));
+    }
+    const res = (0, webpack_merge_1.merge)((0, app_base_1.default)(Object.assign(Object.assign({}, o), { babelEnv: 'development', entry, mode: 'development' })), {
+        output: {
+            chunkFilename: '[id].js',
+            filename: '[id].js',
+        },
+        plugins,
+        snapshot: {
+            // This enforces Webpack to watch for possible changes in node_modules
+            // dependencies, which is a great convenience in library-centric dev
+            // workflows.
+            managedPaths: [],
+        },
+    });
+    return res;
+}
+exports.default = configFactory;

package/config/webpack/app-production.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @category Configs
+ * @module webpack/app-production
+ * @desc Production Webpack configuration for applications.
+ */
+import { type Configuration } from 'webpack';
+import { type OptionsT as BaseOptionsT } from './app-base';
+type OptionsT = BaseOptionsT;
+/**
+ * @param {object} ops
+ * @param {string} ops.context Base URL for resolution of relative config paths.
+ * @param {boolean} [ops.dontEmitBuildInfo] If set the `.build-info` file won't
+ * be created at the disk during the compilation.
+ */
+export default function configFactory(ops: OptionsT): Configuration;
+export {};

package/config/webpack/app-production.js

@@ -0,0 +1,57 @@
+"use strict";
+/**
+ * @category Configs
+ * @module webpack/app-production
+ * @desc Production Webpack configuration for applications.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const css_minimizer_webpack_plugin_1 = __importDefault(require("css-minimizer-webpack-plugin"));
+const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
+const webpack_1 = __importDefault(require("webpack"));
+const webpack_merge_1 = require("webpack-merge");
+const app_base_1 = __importDefault(require("./app-base"));
+/**
+ * @param {object} ops
+ * @param {string} ops.context Base URL for resolution of relative config paths.
+ * @param {boolean} [ops.dontEmitBuildInfo] If set the `.build-info` file won't
+ * be created at the disk during the compilation.
+ */
+function configFactory(ops) {
+    const entry = [
+        '@dr.pogodin/react-utils/build/production/client/init',
+        ...Array.isArray(ops.entry) ? ops.entry : [ops.entry],
+    ];
+    const res = (0, webpack_merge_1.merge)((0, app_base_1.default)(Object.assign(Object.assign({}, ops), { babelEnv: 'production', entry, mode: 'production' })), {
+        optimization: {
+            minimizer: [
+                '...',
+                new css_minimizer_webpack_plugin_1.default({
+                    minimizerOptions: {
+                        preset: ['default', {
+                                /* Due to the way our styles are organized, these dangerous
+                                * optimizations can break our styles, thus they are disabled. */
+                                discardUnused: false,
+                                reduceIdents: false,
+                                zindex: false,
+                            }],
+                    },
+                }),
+            ],
+        },
+        plugins: [
+            new webpack_1.default.DefinePlugin({
+                'process.env.BABEL_ENV': JSON.stringify('production'),
+                'process.env.NODE_ENV': JSON.stringify('production'),
+            }),
+            new mini_css_extract_plugin_1.default({
+                chunkFilename: '[contenthash].css',
+                filename: '[contenthash].css',
+            }),
+        ],
+    });
+    return res;
+}
+exports.default = configFactory;

package/config/webpack/lib-base.d.ts

@@ -0,0 +1,20 @@
+import { type Configuration } from 'webpack';
+export type OptionsT = {
+    babelEnv: string;
+    babelLoaderOptions?: object;
+    context: string;
+    cssLocalIdent?: string;
+    dontUseProgressPlugin?: boolean;
+    entry: string | string[];
+    library: string;
+    mode: 'development' | 'none' | 'production';
+    outputPath?: string;
+    typescript?: boolean;
+};
+/**
+ * @param {object} ops
+ * @param {boolean} [ops.dontUseProgressPlugin] Set to not include progress
+ *  plugin.
+ * @return {object}
+ */
+export default function configFactory(ops: OptionsT): Configuration;

package/config/webpack/lib-base.js

@@ -0,0 +1,154 @@
+"use strict";
+// Base Webpack config for ReactJS libraries.
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = __importDefault(require("path"));
+const autoprefixer_1 = __importDefault(require("autoprefixer"));
+const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
+const webpack_1 = require("webpack");
+const utils_1 = require("@dr.pogodin/babel-plugin-react-css-modules/utils");
+/**
+ * @param {object} ops
+ * @param {boolean} [ops.dontUseProgressPlugin] Set to not include progress
+ *  plugin.
+ * @return {object}
+ */
+function configFactory(ops) {
+    const plugins = [
+        new mini_css_extract_plugin_1.default({ filename: 'style.css' }),
+    ];
+    if (!ops.dontUseProgressPlugin)
+        plugins.push(new webpack_1.ProgressPlugin());
+    return {
+        context: ops.context,
+        entry: ops.entry,
+        externals: [
+            /@babel\/runtime/,
+            '@dr.pogodin/react-global-state',
+            '@dr.pogodin/js-utils',
+            '@dr.pogodin/react-themes',
+            '@dr.pogodin/react-utils',
+            'axios',
+            'dayjs',
+            'lodash',
+            /node-forge/,
+            'prop-types',
+            'qs',
+            'react',
+            /react-dom/,
+            'react-helmet',
+            'react-router-dom',
+            'uuid',
+        ],
+        mode: ops.mode,
+        output: {
+            filename: 'web.bundle.js',
+            // TODO: Check, whether this fix can be dropped.
+            // Workaround to fix umd build, restore webpack v3 behaviour
+            // https://github.com/webpack/webpack/issues/6677
+            // https://github.com/webpack/webpack/issues/6642
+            globalObject: "typeof self !== 'undefined' ? self : this",
+            library: ops.library,
+            path: ops.outputPath,
+            libraryTarget: 'umd',
+        },
+        plugins,
+        module: {
+            rules: [{
+                    /* Handles font imports in url(..) instructions in CSS. Effectively,
+                     * with such configuration it just rewrites those URLs to point to
+                     * the original location of the font assets in
+                     * the library being build. */
+                    test: /\.(eot|otf|svg|ttf|woff2?)$/,
+                    include: [
+                        /node_modules/,
+                        /src[/\\]assets[/\\]fonts/,
+                    ],
+                    type: 'asset/resource',
+                    generator: {
+                        // TODO: This comes from the older config version which relied on
+                        // file-loader. It might require some correction to correctly join
+                        // `publicPath` and `filename`.
+                        filename: '../shared/[path][name][ext]',
+                        publicPath: `${ops.library}/build/shared`,
+                    },
+                }, {
+                    /* Loads JS and JSX moudles, and inlines SVG assets. */
+                    test: ops.typescript ? /\.((j|t)sx?|svg)$/ : /\.(jsx?|svg)$/,
+                    exclude: [
+                        /node_modules/,
+                        /src[/\\]assets[/\\]fonts/,
+                    ],
+                    loader: 'babel-loader',
+                    options: Object.assign({ babelrc: false, configFile: false, envName: ops.babelEnv, presets: [
+                            // NOTE: For the compilation of this very library (react-utils),
+                            // this plugin path is overriden in webpack.config.js in the root of
+                            // the codebase.
+                            ['@dr.pogodin/react-utils/config/babel/webpack', {
+                                    noRR: true,
+                                    typescript: ops.typescript,
+                                }],
+                        ] }, ops.babelLoaderOptions || {}),
+                }, {
+                    /* Loads SCSS stylesheets. */
+                    test: /\.scss/,
+                    exclude: /node_modules/,
+                    use: [
+                        mini_css_extract_plugin_1.default.loader, {
+                            loader: 'css-loader',
+                            options: {
+                                importLoaders: 3,
+                                modules: {
+                                    getLocalIdent: utils_1.getLocalIdent,
+                                    localIdentName: ops.cssLocalIdent,
+                                },
+                            },
+                        }, {
+                            loader: 'postcss-loader',
+                            options: {
+                                postcssOptions: {
+                                    plugins: [
+                                        autoprefixer_1.default,
+                                    ],
+                                },
+                            },
+                        }, 'resolve-url-loader', {
+                            loader: 'sass-loader',
+                            options: {
+                                sourceMap: true,
+                            },
+                        },
+                    ],
+                }, {
+                    /* Loads CSS stylesheets. It is assumed that CSS stylesheets come only
+                    * from dependencies, as we use SCSS inside our own code. */
+                    test: /\.css$/,
+                    use: [
+                        mini_css_extract_plugin_1.default.loader,
+                        'css-loader',
+                    ],
+                }],
+        },
+        resolve: {
+            alias: {
+                /* Aliases to JS an JSX files are handled by Babel. */
+                assets: path_1.default.resolve(ops.context, 'src/assets'),
+                components: path_1.default.resolve(ops.context, 'src/shared/components'),
+                fonts: path_1.default.resolve(ops.context, 'src/assets/fonts'),
+                styles: path_1.default.resolve(ops.context, 'src/styles'),
+            },
+            extensions: [
+                '.ts',
+                '.tsx',
+                '.js',
+                '.jsx',
+                '.json',
+                '.scss',
+            ],
+            symlinks: false,
+        },
+    };
+}
+exports.default = configFactory;

package/config/webpack/lib-development.d.ts

@@ -0,0 +1,5 @@
+import webpack from 'webpack';
+import { type OptionsT as BaseOptionsT } from './lib-base';
+type OptionsT = BaseOptionsT;
+export default function configFactory(ops: OptionsT): webpack.Configuration;
+export {};