@dr.pogodin/react-utils/config/webpack/app-development.js

Collection of generic ReactJS components and utils

"use strict";
/* eslint-disable import/no-extraneous-dependencies */
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = configFactory;
const clone_js_1 = __importDefault(require("lodash/clone.js"));
const defaults_js_1 = __importDefault(require("lodash/defaults.js"));
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, defaults_js_1.default)((0, clone_js_1.default)(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(Object.assign({ chunkFilename: '[id].css', filename: '[id].css' }, ops.cssExtractionOptions)),
        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;
}