Webpack5-react スキャフォールディングをゼロから構築するための実装手順 (ソースコード付き)

npm i ykj-cli -g 
ykj init webpack5 (ここでは一般的なプロジェクトテンプレートを選択してください)
cd webpack5
糸 
糸開発

mkdir webpack5-demo
cd webpack5-デモ
糸初期化webpack5-demo
...最後まで入力してください

糸を追加 webpack@next webpack-cli@next -D

糸 [email protected] [email protected] --save を追加します

糸を追加して、反応リフレッシュ -D

yarn less less-loader css-loader style-loader mini-css-extract-plugin@next -D を追加します

糸を [email protected] に追加します @babel/core@next babel-loader@next @babel/preset-env@next -D

paths.js//ストレージパスwebpack.base.js //基本設定webpack.dev.js//開発設定webpack.prod.js//本番環境設定

定数パス = require('path');

モジュール.エクスポート = {
    // ソースディレクトリ src: path.resolve(__dirname, '../src'),

    // 構築後のリソース製品フォルダ build: path.resolve(__dirname, '../dist'),

    // 静的リソース public: path.resolve(__dirname, '../public'),
};

//webpack.base.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
HtmlWebpackPlugin は 'html-webpack-plugin' を必要とします。
定数パス = require('path');
定数paths = require('./paths');

 エントリ: paths.src + 'index.tsx'、
 出力: {
        パス: path.resolve(__dirname, '../dist'),
        ファイル名: '[名前].[コンテンツハッシュ].js',
        パブリックパス: ''、
    },

    モジュール: {
        ルール:
            {
                使用: 'babel-loader'、
                テスト: /\.(ts|tsx)$/,
                除外: /node_modules/、
            },
            {
                使用: ['style-loader', 'css-loader', 'less-loader'],
                テスト: /\.(css|less)$/,
            },
            {
                タイプ: '資産'、
                テスト: /\.(png|svg|jpg|jpeg|gif)$/i,
            },
        ]、
    },

 解決する： {
        拡張子: ['.ts', '.tsx', '.js', '.json', '.jsx'],
        エイリアス: {
            '@': パス.src、
            '@c': paths.src + '/components',
            '@m': paths.src + '/model',
            '@s': paths.src + '/services',
            '@t': paths.src + '/types',
        },
    },

  プラグイン: [
        新しい CleanWebpackPlugin()、
        新しいHtmlWebpackプラグイン({
            テンプレート: './public/index.html',
        }）、
    ]、

const { argv } = require('yargs');
const isDev = argv.mode === '開発';
const プラグイン = [
    [
        'const-enum'、
        {
            変換: 'constObject',
        },
    ]、
    「ロダッシュ」、
    '@babel/plugin-transform-runtime',
    //インポート遅延読み込み '@babel/plugin-syntax-dynamic-import' をサポート、
    '@babel/plugin-transform-async-to-generator',
    '変換クラスプロパティ'、
    [
        '輸入'、
        {
            ライブラリ名: 'antd',
            ライブラリディレクトリ: 'es',
            style: true、// または 'css'
        },
        'antd',
    ]、
    [
        '輸入'、
        {
            ライブラリ名: 'ykj-ui',
            ライブラリディレクトリ: 'lib/components',
            style: true、// または 'css'
        },
        'ykj-ui',
    ]、
];
モジュール.エクスポート = (api) => {
    api.cache(true);
    戻る {
        プリセット: [
            [
                '@babel/プリセット環境',
                {
                    コアjs: 3.9、
                    useBuiltIns: '使用法',
                },
            ]、
            [
                '@babel/プリセット-react',
                {
                    ランタイム: '自動'、
                },
            ]、
            '@babel/preset-typescript',
        ]、
        プラグイン: isDev ? [...プラグイン、'react-refresh/babel'] : [...プラグイン]、
    };
};

ReactRefreshWebpackPlugin は、react.js で定義されています。
const { HotModuleReplacementPlugin } = require('webpack');
const { merge } = require('webpack-merge');
'./webpack.base' というコンストラクタを require します。

定数devConfig = {
    モード: '開発'、
    開発サーバー: {
        ポート: 3000、
        コンテンツベース: '../dist',
        オープン: 真、
        ホット：本当、
    },
    ターゲット: 'ウェブ'、
    プラグイン: [新しい HotModuleReplacementPlugin()、新しい ReactRefreshWebpackPlugin()]、
    開発ツール: 'eval-cheap-module-source-map',
};

module.exports = merge(common, devConfig);

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { merge } = require('webpack-merge');
'./webpack.base' というコンストラクタを require します。

const prodConfig = {
    モード: 'production'、
    開発ツール: '隠しソースマップ',
    モジュール: {
        ルール:
            {
                テスト: /\.(css|less)$/,
                使用: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'],
            },
        ]、
    },
    最適化：
        分割チャンク: {
            チャンク: 'すべて'、
            名前: 偽,
        },
    },
    プラグイン: [新しい MiniCssExtractPlugin()],
};
module.exports = merge(common, prodConfig);

"ビルド": "webpack --config config/webpack.prod.js --mode production",
"dev": "webpack serve --config config/webpack.dev.js --mode development",

糸を追加 lint-staged @commitlint/cli @commitlint/config-conventional -D

 「ハスキー」：{
        「フック」: {
            「事前コミット」: 「lint ステージング」、
            "コミットメッセージ": "commitlint -E HUSKY_GIT_PARAMS"
        }
    },
    「lintステージング」: {
        "src/**/*.{js,jsx,ts,tsx,json,css,less,md}": [
            「よりきれいに --write」、
            "eslint --fix",
            「git 追加」
        ]
    },
    「ブラウザリスト」: [
        「つまり >= 10」、
        "ff >= 30",
        "クロム >= 34",
        "サファリ >= 8",
        「オペラ >= 23」
    ]
}

//.eslintrc.js
モジュール.エクスポート = {
    ルート: true、
    パーサーオプション: {
        ecmaバージョン: 7,
        ソースタイプ: 'モジュール',
    },
    パーサー: '@typescript-eslint/parser',
    プラグイン: ['typescript', 'react'],
    環境: {
        ブラウザ: true、
        ノード: true、
        es6: 本当、
    },
    ルール:
        semi: ['error', 'always'], // このルールは一貫したセミコロンを強制します 'no-unused-vars': 'off', // 未使用の変数を許可しません 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 本番環境でデバッガーを無効にします
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', //本番環境でコンソールを無効にする
        'default-case': ['warn', { commentPattern: '^no default$' }], // Switch ステートメントに Default が必要です
        'dot-location': ['warn', 'property'], // doteqeqeq の前または後に強制的に改行します: ['error', 'allow-null'], // === と !== を使用する必要があります
        'new-parens': 'warn', // 引数なしのコンストラクタを呼び出すときは括弧が必要 'no-caller': 'error', // 呼び出し元または呼び出し先を無効にする
        'no-const-assign': 'error', //const で宣言された変数の変更を禁止します'no-dupe-args': 'error', //関数定義内の重複パラメータを禁止します'no-dupe-class-members': 'error', //クラス メンバー内の重複名を禁止します'no-dupe-keys': 'warn', //オブジェクト リテラル内の重複キーを禁止します'no-extend-native': 'warn', //ネイティブ オブジェクトの拡張を禁止します'no-extra-bind': 'warn', //不必要な関数バインディングを禁止します'no-fallthrough': 'error', //case ステートメントのフォールスルーを禁止します'no-func-assign': 'warn', //関数宣言の再割り当てを禁止します'no-implied-eval': 'error', //暗黙の eval() を無効にします
        'no-label-var': 'error', //変数と同じ名前のラベルを無効にする 'no-loop-func': 'error', //ループ内の関数を無効にする 'no-mixed-operators': [
            「警告」、
            {
                グループ: [
                    ['&', '|', '^', '~', '<<', '>>', '>>>'],
                    ['==', '!=', '===', '!==', '>', '>=', '<', '<='],
                    ['&&', '||'],
                    ['in', 'instanceof'],
                ]、
                allowSamePrecedence: false、
            },
        ], // 異なる演算子の混在使用を無効にする 'no-multi-str': 'warn', // 複数行の文字列を無効にする (複数行が必要な場合は \n を使用する)
        'no-native-reassign': 'warn', //ローカルオブジェクトの再割り当てを無効にする'no-obj-calls': 'warn', //グローバルオブジェクトの関数としての呼び出しを無効にする'no-redeclare': 'error', //変数の再宣言を無効にする'no-script-url': 'warn', //スクリプト URL を無効にする
        'no-shadow-restricted-names': 'warn', //キーワードはシャドウできません 'no-sparse-arrays': 'warn', //スパース配列を無効にします 'no-this-before-super': 'warn', //コンストラクタで super() を呼び出す前に this または super の使用を無効にします
        'no-undef': 'error', // 宣言されていない変数を無効にする 'no-unexpected-multiline': 'warn', // 紛らわしい複数行の式を無効にする 'no-use-before-define': [
            「警告」、
            {
                関数: false、
                クラス: false、
                変数: false、
            },
        ], //定義前の使用を無効にする'no-with': 'error', //ステートメントで無効にするradix: 'error', //関数内で yield のないジェネレーター関数を無効にする'rest-spread-spacing': ['warn', 'never'], //スプレッド演算子とその式の間のスペースの制限を適用する'react/jsx-no-undef': 'error', //JSX で宣言されていない変数を無効にする'react/no-direct-mutation-state': 'error', //this.state への直接変更を無効にする'react/jsx-uses-react': 'warn', //React が誤って未使用としてマークされるのを防ぐ'no-alert': 0, //アラート確認プロンプトの使用を無効にする
        'no-duplicate-case': 2, //switch 内の case ラベルは繰り返すことができません'no-eq-null': 2, //null に == または != 演算子を使用しないでください'no-inner-declarations': [2, 'functions'], //ブロック ステートメントで宣言 (変数または関数) を使用しないでください
        'no-iterator': 2, // __iterator__ 属性の使用を無効にします 'no-negated-in-lhs': 2, // in 演算子の左側には、! を含めることはできません。
        'no-octal-escape': 2, // 8進エスケープシーケンスの使用を無効にします 'no-plusplus': 0, // ++、-- の使用を無効にします
        'no-self-compare': 2, // 自分自身を比較することはできません 'no-undef-init': 2, // 初期化時に変数に undefined を直接割り当てることはできません
        'no-unused-expressions': 2, // 無駄な式を許可しない 'no-useless-call': 2, // 不要な呼び出しを許可しない
        'init-declarations': 0, // 宣言時に初期値を割り当てる必要があります 'prefer-const': 0, // const が優先されます
        'use-isnan': 2, //比較時に NaN の使用を無効にし、isNaN() のみを使用する
        'vars-on-top': 2, //var はスコープの先頭に配置する必要があります},
};

"test": "jest", //テストを実行 "test-c": "jest --coverage" //テストレポートを生成

yarn に jest-environment-enzyme と ts-jest@next の酵素、enzyme-adapter-react-17、enzyme-to-json を @types/enzyme と @types/enzyme-adapter-react-17 と @types/enzyme-to-json -D で追加します。 

'../src/App' から App をインポートします。
'enzyme' から { mount, shallow } をインポートします。
'react' から React をインポートします。
import toJson from 'enzyme-to-json'; //スナップショットを作成する