@dr.pogodin/react-utils/config/webpack/lib-base.js

Collection of generic ReactJS components and utils

"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 });
exports.default = configFactory;
/* eslint-disable import/no-extraneous-dependencies */
const node_path_1 = __importDefault(require("node: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) {
    var _a;
    const plugins = [
        new mini_css_extract_plugin_1.default(Object.assign({ filename: 'style.css' }, ops.cssExtractionOptions)),
    ];
    if (!ops.dontUseProgressPlugin)
        plugins.push(new webpack_1.ProgressPlugin());
    plugins.push(new webpack_1.DefinePlugin({
        // TODO: This is a hotfix - when Webpack build of the library is loaded
        // it should consider itself running at the client side.
        REACT_UTILS_WEBPACK_BUNDLE: 'true',
    }));
    return {
        context: ops.context,
        entry: ops.entry,
        externals: [
            /@babel\/runtime/,
            '@dr.pogodin/js-utils',
            '@dr.pogodin/react-global-state',
            '@dr.pogodin/react-helmet',
            '@dr.pogodin/react-themes',
            '@dr.pogodin/react-utils',
            'axios',
            'cookie',
            'dayjs',
            'lodash-es',
            /node-forge/,
            'qs',
            'react',
            /react-dom/,
            'react-router',
            'uuid',
        ],
        mode: ops.mode,
        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|ttf|woff2?)$/,
                    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`,
                    },
                    type: 'asset/resource',
                }, {
                    // Aggregates source maps from dependencies.
                    test: /\.js$/,
                    enforce: 'pre',
                    use: ['source-map-loader'],
                }, {
                    /* Loads JS and JSX moudles, and inlines SVG assets. */
                    test: /\.(cjs|js|jsx|mjs|svg|ts|tsx)$/,
                    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,
                                }],
                        ] }, (_a = ops.babelLoaderOptions) !== null && _a !== void 0 ? _a : {}),
                }, {
                    /* 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,
                                    // This flag defaults `true` for ES module builds since css-loader@7.0.0:
                                    // https://github.com/webpack-contrib/css-loader/releases/tag/v7.0.0
                                    // We'll keep it `false` to avoid a breaking change for dependant
                                    // projects, and I am also not sure what are the benefits of
                                    // named CSS exports anyway.
                                    namedExport: false,
                                },
                            },
                        }, {
                            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',
                    ],
                }],
        },
        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,
            libraryTarget: 'umd',
            path: ops.outputPath,
        },
        plugins,
        resolve: {
            alias: {
                /* Aliases to JS an JSX files are handled by Babel. */
                assets: node_path_1.default.resolve(ops.context, 'src/assets'),
                components: node_path_1.default.resolve(ops.context, 'src/shared/components'),
                fonts: node_path_1.default.resolve(ops.context, 'src/assets/fonts'),
                styles: node_path_1.default.resolve(ops.context, 'src/styles'),
            },
            extensions: [
                '.ts',
                '.tsx',
                '.js',
                '.jsx',
                '.json',
                '.scss',
            ],
            symlinks: false,
        },
    };
}