Implementierungsschritte zum Erstellen eines Webpack5-React-Gerüsts von Grund auf (mit Quellcode)

npm ich ykj-cli -g 
ykj init webpack5 (wählen Sie hier die allgemeine Projektvorlage aus)
CD webpack5
Garn 
Garn-Entwickler

mkdir webpack5-demo
CD Webpack5-Demo
Garn init Webpack5-Demo
...Geben Sie den ganzen Weg ein

Garn hinzufügen webpack@next webpack-cli@next -D

Garn hinzufügen [email protected] [email protected] --speichern

Garn hinzufügen reagieren-erneuern -D

Garn hinzufügen weniger Less-Loader CSS-Loader Style-Loader Mini-CSS-Extrakt-Plugin@next -D

Garn hinzufügen [email protected] @babel/core@next babel-loader@next @babel/preset-env@next -D

paths.js//Speicherpfadwebpack.base.js //Grundkonfigurationwebpack.dev.js//Entwicklungskonfigurationwebpack.prod.js//Produktionskonfiguration

const path = require('Pfad');

modul.exporte = {
    // Quellverzeichnis src: path.resolve(__dirname, '../src'),

    // Der Ressourcenproduktordner nach der Erstellung von build: path.resolve(__dirname, '../dist'),

    // statische Ressource öffentlich: path.resolve(__dirname, '../public'),
};

//webpack.base.js
const { CleanWebpackPlugin } = erforderlich('clean-webpack-plugin');
const HtmlWebpackPlugin = erfordern('html-webpack-plugin');
const path = require('Pfad');
const Pfade = erfordern('./Pfade');

 Eintrag: paths.src + 'index.tsx',
 Ausgabe: {
        Pfad: Pfad.auflösen(__dirname, '../dist'),
        Dateiname: '[name].[contenthash].js',
        öffentlicher Pfad: '',
    },

    Modul: {
        Regeln:
            {
                verwenden: 'babel-loader',
                Test: /\.(ts|tsx)$/,
                ausschließen: /node_modules/,
            },
            {
                verwenden: ['style-loader', 'css-loader', 'less-loader'],
                Test: /\.(css|less)$/,
            },
            {
                Typ: "Vermögenswert",
                Test: /\.(png|svg|jpg|jpeg|gif)$/i,
            },
        ],
    },

 lösen: {
        Erweiterungen: ['.ts', '.tsx', '.js', '.json', '.jsx'],
        Alias: {
            '@': Pfade.src,
            '@c': Pfade.src + '/Komponenten',
            '@m': Pfade.src + '/Modell',
            '@s': Pfade.src + '/Dienste',
            '@t': Pfade.src + '/Typen',
        },
    },

  Plugins: [
        neues CleanWebpackPlugin(),
        neues HtmlWebpackPlugin({
            Vorlage: './public/index.html',
        }),
    ],

const { argv } = erfordern('yargs');
const isDev = argv.mode === 'Entwicklung';
const-Plugins = [
    [
        "Konstante Aufzählung",
        {
            transformieren: "constObject",
        },
    ],
    'lodash',
    '@babel/plugin-transform-runtime',
    //Unterstützt verzögertes Laden des Imports '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-transform-async-to-generator',
    'Transform-Klasseneigenschaften',
    [
        'Import',
        {
            Bibliotheksname: "antd",
            libraryDirectory: 'es',
            Stil: true, // oder „css“
        },
        'antd',
    ],
    [
        'Import',
        {
            Bibliotheksname: "ykj-ui",
            Bibliotheksverzeichnis: 'lib/components',
            Stil: true, // oder „css“
        },
        'ykj-ui',
    ],
];
module.exports = (api) => {
    api.cache(true);
    zurückkehren {
        Voreinstellungen: [
            [
                '@babel/Vorgabe-Umgebung',
                {
                    corejs: 3.9,
                    useBuiltIns: 'Verwendung',
                },
            ],
            [
                '@babel/Voreinstellung-reagieren',
                {
                    Laufzeit: 'automatisch',
                },
            ],
            '@babel/Vorgabe-Typescript',
        ],
        Plugins: isDev? [...Plugins, 'react-refresh/babel']: [...Plugins],
    };
};

const ReactRefreshWebpackPlugin = erforderlich('@pmmmwh/react-refresh-webpack-plugin');
const { HotModuleReplacementPlugin } = erfordern('webpack');
const { merge } = erfordern('webpack-merge');
const common = erfordern('./webpack.base');

const devConfig = {
    Modus: "Entwicklung",
    devServer: {
        Port: 3000,
        Inhaltsbasis: "../dist",
        offen: wahr,
        heiß: wahr,
    },
    Ziel: "Web",
    Plugins: [neues HotModuleReplacementPlugin(), neues ReactRefreshWebpackPlugin()],
    devtool: "eval-cheap-modul-source-map",
};

module.exports = merge(common, devConfig);

const MiniCssExtractPlugin = erfordern('mini-css-extract-plugin');
const { merge } = erfordern('webpack-merge');
const common = erfordern('./webpack.base');

const prodConfig = {
    Modus: 'Produktion',
    devtool: 'versteckte Quellkarte',
    Modul: {
        Regeln:
            {
                Test: /\.(css|less)$/,
                verwenden: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'],
            },
        ],
    },
    Optimierung:
        geteilte Chunks: {
            Brocken: "alle",
            Name: falsch,
        },
    },
    Plugins: [neues MiniCssExtractPlugin()],
};
module.exports = merge(common, prodConfig);

"Build": "webpack --config config/webpack.prod.js --mode Produktion",
"dev": "webpack serve --config config/webpack.dev.js --mode Entwicklung",

Garn fügt lint-staged hinzu @commitlint/cli @commitlint/config-conventional -D

 "Husky": {
        "Haken": {
            "pre-commit": "lint-staged",
            "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
        }
    },
    "lint-staged": {
        "src/**/*.{js,jsx,ts,tsx,json,css,less,md}": [
            "hübscher --write",
            "eslint --fix",
            "git add"
        ]
    },
    "Browserliste": [
        "dh >= 10",
        "ff >= 30",
        "Chrom >= 34",
        "Safari >= 8",
        "Oper >= 23"
    ]
}

//.eslintrc.js
modul.exporte = {
    Wurzel: wahr,
    Parseroptionen: {
        ecmaVersion: 7,
        Quelltyp: "Modul",
    },
    Parser: '@typescript-eslint/parser',
    Plugins: ['Typescript', 'Reagieren'],
    Umgebung: {
        Browser: wahr,
        Knoten: wahr,
        es6: wahr,
    },
    Regeln:
        semi: ['error', 'always'], // Diese Regel erzwingt konsistente Semikolons 'no-unused-vars': 'off', // Nicht verwendete Variablen nicht zulassen 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // Debugger in der Produktionsumgebung deaktivieren
        „no-console“: process.env.NODE_ENV === „Produktion“? „Fehler“: „aus“, //Konsole in der Produktionsumgebung deaktivieren
        'default-case': ['warn', { commentPattern: '^no default$' }], //Erfordert Default in der Switch-Anweisung
        'dot-location': ['warn', 'property'], // Erzwinge einen Zeilenumbruch vor oder nach dem doteqeqeq: ['error', 'allow-null'], // Erfordert die Verwendung von === und !==
        „new-parens“: „warn“, // Klammern sind erforderlich, wenn ein Konstruktor ohne Argumente aufgerufen wird. „no-caller“: „error“, // Anrufer oder Angerufenen deaktivieren.
        'no-const-assign': 'error', //Ändern von mit const deklarierten Variablen nicht zulässig'no-dupe-args': 'error', //Doppelte Parameter in Funktionsdefinitionen nicht zulässig'no-dupe-class-members': 'error', //Doppelte Namen in Klassenmitgliedern nicht zulässig'no-dupe-keys': 'warn', //Doppelte Schlüssel in Objektliteralen nicht zulässig'no-extend-native': 'warn', //Erweitern nativer Objekte nicht zulässig'no-extra-bind': 'warn', //Unnötiges Funktionsbinden nicht zulassen'no-fallthrough': 'error', //Fallthrough von Case-Anweisungen nicht zulassen'no-func-assign': 'warn', //Neuzuweisung von Funktionsdeklarationen nicht zulassen'no-implied-eval': 'error', //Implizites eval() deaktivieren
        'no-label-var': 'error', //Deaktiviere Labels mit dem gleichen Namen wie Variablen 'no-loop-func': 'error', //Deaktiviere Funktionen in Schleifen 'no-mixed-operators': [
            'warnen',
            {
                Gruppen: [
                    ['&', '|', '^', '~', '<<', '>>', '>>>'],
                    ['==', '!=', '===', '!==', '>', '>=', '<', '<='],
                    ['&&', '||'],
                    ['in', 'Instanz von'],
                ],
                allowSamePrecedence: false,
            },
        ], //Deaktiviere die gemischte Verwendung verschiedener Operatoren 'no-multi-str': 'warn', //Deaktiviere mehrzeilige Zeichenfolgen (verwende \n, wenn mehrere Zeilen erforderlich sind)
        'no-native-reassign': 'warn', //Deaktiviere die Neuzuweisung lokaler Objekte. 'no-obj-calls': 'warn', //Deaktiviere das Aufrufen globaler Objekte als Funktionen. 'no-redeclare': 'error', //Deaktiviere die Neudeklaration von Variablen. 'no-script-url': 'warn', //Deaktiviere Skript-URL.
        'no-shadow-restricted-names': 'warn', //Schlüsselwörter können nicht überschattet werden 'no-sparse-arrays': 'warn', //Spärliche Arrays deaktivieren 'no-this-before-super': 'warn', //Deaktivieren Sie die Verwendung von this oder super, bevor Sie super() im Konstruktor aufrufen
        'no-undef': 'error', //Nicht deklarierte Variablen deaktivieren 'no-unexpected-multiline': 'warn', //Verwirrende mehrzeilige Ausdrücke deaktivieren 'no-use-before-define': [
            'warnen',
            {
                Funktionen: false,
                Klassen: false,
                Variablen: false,
            },
        ], //Verwendung vor der Definition deaktivieren'no-with': 'error', //Mit Anweisung deaktivierenradix: 'error', //Generatorfunktion ohne Yield in der Funktion deaktivieren'rest-spread-spacing': ['warn', 'never'], //Begrenzung des Leerzeichens zwischen dem Spread-Operator und seinem Ausdruck erzwingen'react/jsx-no-undef': 'error', //Nicht deklarierte Variablen in JSX deaktivieren'react/no-direct-mutation-state': 'error', //Direkte Änderungen an this.state deaktivieren'react/jsx-uses-react': 'warn', //Verhindern, dass React fälschlicherweise als nicht verwendet markiert wird'no-alert': 0, //Verwendung der Warnbestätigungsaufforderung deaktivieren
        'no-duplicate-case': 2, //Fallbezeichnungen im Schalter können nicht wiederholt werden'no-eq-null': 2, //Verwenden Sie keine ==- oder !=-Operatoren auf null'no-inner-declarations': [2, 'functions'], //Verwenden Sie keine Deklarationen (Variablen oder Funktionen) in Blockanweisungen
        'no-iterator': 2, //Deaktiviere die Verwendung des Attributs __iterator__. 'no-negated-in-lhs': 2, //Die linke Seite des In-Operators darf nicht haben!
        „no-octal-escape“: 2, // Deaktiviert die Verwendung von oktalen Escape-Sequenzen. „no-plusplus“: 0, // Deaktiviert die Verwendung von ++, --
        'no-self-compare': 2, //Kann sich nicht selbst vergleichen. 'no-undef-init': 2, //Kann einer Variablen beim Initialisieren nicht direkt „undefined“ zuweisen.
        'no-unused-expressions': 2, //Unnötige Ausdrücke verbieten 'no-useless-call': 2, //Unnötige Aufrufe und Anwendungen verbieten
        'init-declarations': 0, // muss beim Deklarieren ein Anfangswert zugewiesen werden 'prefer-const': 0, // const wird bevorzugt
        'use-isnan': 2, //Deaktiviere die Verwendung von NaN beim Vergleichen, verwende nur isNaN()
        'vars-on-top': 2, //var muss oben im Bereich platziert werden},
};

"test": "jest", //Test durchführen "test-c": "jest --coverage" //Testbericht erstellen

Garn hinzufügen Jest-Umgebung-Enzym ts-jest@nächstes Enzym Enzym-Adapter-Reagieren-17 Enzym-zu-JSON @Typen/Enzym @Typen/Enzym-Adapter-Reagieren-17 @Typen/Enzym-zu-JSON -D 

importiere App aus „../src/App“;
importiere { mount, flach } von 'Enzym';
importiere React von „react“;
importiere toJson von 'enzyme-to-json'; //Erstelle einen Schnappschuss