REACT CRAを使用せずにプロジェクトを作成(1)

なぜCRAを使わないのですか?
インストール

冗長モジュール

Webpack.config.jsを使用して複数のオプションを変更する必要がある場合は、

プロジェクトの作成

npm init -y
or
yarn init -y

reactを使用したデフォルトのインストールパッケージ

npm i react react-dom	// react 개발에 필요
npm install --save-dev webpack // 웹팩 기본 라이브러리
npm i --D webpack-cli // 웹팩을 명령어로 사용하기 위한 라이브러리
npm i --D html-webpack-plugin // html을 webpack으로 번들링 하기 위한 라이브러리
npm i --D webpack-dev-server // 웹팩을 이용한 로컬 테스트용 라이브러리
npm i --D babel-loader // 버전 호환을 위한 기본 라이브러리
npm i --D @babel-core // 코드에서 직접 바벨로 컴파일 할때 사용하는 라이브러리
npm i --D @babel-preset-env // babel에서 가장 많이 쓰는 플러그인 모음
npm i --D @babel-react // babel에서 많이 쓰이는 react용 플러그인 모음

* i = install
* --save-dev = --D

パッケージをインストールした後のパッケージ.jsonファイルを次のように表示します.
package.json

{
    "main": "index.js",
    "scripts": {
        "build": "webpack --mode production",
        "start": "webpack-dev-server --mode development --open",
    },
    "devDependencies": {
        "@babel/preset-env": "^7.16.11",
        "@babel/preset-react": "^7.16.7",
        "@types/react": "^18.0.0",
        "@types/react-dom": "^18.0.0",
        "@typescript-eslint/eslint-plugin": "^5.17.0",
        "@typescript-eslint/parser": "^5.17.0",
        "babel-loader": "^8.2.4",
        "eslint": "^8.12.0",
        "eslint-config-airbnb": "^19.0.4",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-prettier": "^4.0.0",
        "eslint-plugin-react": "^7.29.4",
        "html-webpack-plugin": "^5.5.0",
        "prettier": "^2.6.2",
        "source-map-loader": "^3.0.1",
        "ts-loader": "^9.2.8",
        "ts-node": "^10.7.0",
        "typescript": "^4.6.3",
        "webpack": "^5.72.0",
        "webpack-cli": "^4.9.2",
        "webpack-dev-server": "^4.8.1"
    },
    "dependencies": {
        "react": "^18.0.0",
        "react-dom": "^18.0.0"
    }
}

scriptコマンドを追加します.

"scripts": {
        "build": "webpack --mode production",
        "start": "webpack-dev-server --mode development --open",
    },

babel-loaderを使っているのでbabelrcファイルが不要な場合は、以下のように作成します.
ルートディレクトリにあります.babelrcファイルの作成
.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": []
}

テストの構築と開発に使用するwebpack設定を作成します.
次はサンプルwebpackです.config.これはjsファイルです.参考までに.
ルートディレクトリでwebpackを使用します.config.jsファイルの作成
webpack.config.js

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 번들 파일 생성 위치
const bundlePath = path.resolve(__dirname, 'dist/');

module.exports = (_env, argv) => {
    let entryPoints = {
        main: {
            path: './src/index.jsx',
            outputHtml: 'main.html',
            build: true
        },
        config: {
            path: './src/config.jsx',
            outputHtml: 'config.html',
            build: false
        }
    };

    let entry = {};

    // 웹팩 플러그인 추가 구성
    let plugins = [new webpack.HotModuleReplacementPlugin()];
  
    Object.entries(entryPoints).map(([key, value]) => {
        if (value.build) {
            entry[key] = value.path;
            if (argv.mode === 'production') {
                plugins.push(
                    new HtmlWebpackPlugin({
                        inject: true,
                        chunks: [key],
                        template: './public/template.html',
                        filename: value.outputHtml
                    })
                );
            }
        }
        return null;
    });

    let config = {
        entry,
        optimization: {
            minimize: true // 불필요한 코드 최적화
        },
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                '@babel/preset-env',
                                '@babel/preset-react'
                            ],
                            plugins: []
                        }
                    }
                },
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                },
                {
                    test: /\.(jpe?g|png|gif|svg)$/i,
                    loader: 'file-loader',
                    options: {
                        name: 'img/[name].[ext]'
                    }
                }
            ]
        },
        resolve: { extensions: ['*', '.js', '.jsx'] },
        output: {
            filename: '[name].js',
            path: bundlePath
        },
        plugins
    };

    if (argv.mode === 'development') {
        config.devServer = {
            static: './public',
            host: 'localhost',
            // host: '192.168.0.242',
            // host: '0.0.0.0',
            port: 3008,
            historyApiFallback: {
                index: 'index.html' //다중 엔트리 이기 때문에 시작시 기본 사용할 페이지를 지정해 준다. 해당페이지는 http://localhost:3008/ 기본URL의 index page가 된다.
            },
            hot: true	// 테스트 구동과 동시에 기본페이지가 오픈된다.
            allowedHosts: ['domain'],
        };
        config.performance = {
            hints: false,
            maxEntrypointSize: 512000,
            maxAssetSize: 512000
        };
        config.output = {
            // publicPath: "/",
            path: path.resolve(__dirname, './dist'),
            filename: '[name].js'
        };
    }
    return config;
};

州
static:テスト開始時にデフォルトで使用される場所
旧バージョンcontentBaseが静的に変更されました
./publicフォルダにインデックスを作成します.起動するにはhtmlが必要です.
templateプロパティは、実際のファイルがある場所に値を設定する必要があります.

コンストラクションおよびテストドライバに次のファイルを追加します.
構築時に使用するテンプレートページ
template.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
    </head>
    <body>
        <div id="example"></div>

        <!-- Dependencies -->
        <script src="./node_modules/react/umd/react.development.js"></script>
        <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

        <!-- Main -->
        <script src="./main.bundle.js"></script>
    </body>
</html>

テスト実行時に使用するインデックスページ
index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
    </head>
    <body>
        <div id="example"></div>

        <!-- Dependencies -->
        <script src="./node_modules/react/umd/react.development.js"></script>
        <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

        <!-- Main -->
        <script src="main.js"></script>
    </body>
</html>

デフォルト設定はすべて完了
ハローワールドの印刷
次のページに記入します.
index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';

ReactDOM.render(    
    <div>Hello World</div>,
    document.getElementById('example')
);

ビルド

npm run build	 // 빌드 ./dist 페이지에 빌드 파일이 생성된다.
or
npm run start	// 테스트 구동  웹페이지가 자동으로 팝업된다.

by Kazel