[Webpack,Babel]react-create-app開発環境


💬 Webpack, Babel
  • Reactはnpx create-act-app「フォルダ名」コマンドで開発環境を簡単に構築できます.
  • このとき、Babelで最新の構文のjavscriptをブラウザで使用可能(コンパイル)に変換し、複数のモジュールを1つのWebpackに統合してブラウザに配備できるようにするプロセスを「Build」と呼ぶ.
  • 🔎 Create-React-APPのwebpack.config.インデント
  • create-act-appでプロジェクトを作成すると、CRAはスクリプトファイルを非表示にします.そのため、ファイルをポップアップするには、次のコマンドが必要です.
  • 	npm run eject
  • 以降はconfig、scriptフォルダが作成され、webpack、babelなどを構築するための複数のプロファイルが含まれます.

  • すべての設定を理解するにはまだ不十分で、Webpack、Babelのみを表示し、その後追加学習で学習する🥲
    💬 Webpack、Babyのキャラクター
    Module Bundler
  • 複数のモジュールを1つのファイルにパッケージ
  • モジュールは、JavaScript、スタイルシート、画像などのすべてのコンテンツ
  • を含む.

    🔎 なぜWebpackを使うのですか?
  • 要求/応答時に同じタイプ(HTML、CSS、JSなど)のファイルが受信され、ネットワークコスト
  • が削減される.
  • は、2つのモードを開発および生産します.
  • は、生産モードでバンドルされたときにコードの乱読、圧縮、最適化(ツリー共有)操作をサポートします.
  • ローダー要素は、一部のブラウザでサポートされていないES 6形式のJavaScriptファイルをES 5に変換して使用できます.
    (Chromeブラウザのみならず、他のブラウザでも利用可能)
  • 🔎 Webpack主要コンポーネント
    ✓ Bundle
  • 参照関係のモジュールを1つのファイルに結合します.
  • すべてのモジュール
  • をロードするために検索時間を短縮する.
  • 未使用コード
  • を削除
  • ファイルサイズを縮小
  • ✓ Entry
  • 参照関係を説明し,依存性図を作成する.
  • 依存グラフィック
  • を作成するためにどのモジュールを起点として解釈するかを決定する.
    ✓ Output
  • Entryで依存関係図を作成し、バインド中にOutputで設定する情報に基づいてバインドファイル
  • を作成する.
    ✓ Mode
  • バージョン環境(開発と導入)
  • の設定
    ✓ Loader
  • HTML、CSS、ImageなどのモジュールはWebspecが理解できる
  • に変更されました.
  • webパッケージではJS、JSONしか生成できません.
  • ✓ Plugin
  • もう1つのデリバリ形状を変更するためのロール
  • 🔎 Babyって何?
    JavaScriptコンパイラ
  • は、最新バージョンのJavaScript構文(ES 6、ES 7)をブラウザが理解できる構文に変換する.
    💡 要するに、Babel、Webpackの役割は、JS、HTML、CSSなどのモジュールを統合または変換して、導入環境を効率的に構築することです.
    npx create-react-app
    プロジェクト環境を設定すると、npm run buildを使用してコンストラクションファイルを簡単に作成し、導入環境を作成できます.