WebpackとBabyとは?

Webpackとは?

Webpackは、HTMLファイルのJavaScriptファイルをJavaScriptファイルとして作成するモジュールバインディング(モジュールバインディング)です.

2.なぜWebpackを使うのですか?

以前は、ページごとに新しいHTMLの送信を要求する方式(SSR)だったが、現在ではSPA方式(CSR)が多く採用されている.SPAは、1つのHTMLページに複数のJavaScriptファイルを含む.Webpackは関連するJavaScript類の松石ファイルを1つのファイルにパッケージ化し、管理しやすい.
ファイルをコンパイルする場合、複数のモジュールからファイルを読み込むのに時間がかかります.この問題を解決するために、複数のファイルを1つのファイルにバインドできます.
JavaScriptファイルを作成することで、Webページのパフォーマンスを最適化します.
Webpackは、乱雑な<script>タグを1つのファイルに組み合わせるツールです.

3.Webpackの基本構造

// 파일명 = wepback.config.js 를 루트 디렉토리에 만든다.

module.exports={
    entry : './src/test.js',
    output: {
        filename : 'bundle.js',
        path : path.resolve(__dirname + '/build')
    },
    mode : 'none'
}

entry:構築対象となるファイルのパス

出力:構築成果物を格納するパス

path:ファイルパスを処理および変更するユーティリティ

Plug-In:構築されたbundleファイルを動的に特定のhtmlページに追加し、構築時にjavscript、css、htmlなどのファイルを乱読および圧縮できます.

WebpackにはJavascriptとJsonだけが理解できるという欠点があります.
Loaderは、他のタイプのファイルをWebpackが理解し、処理できるモジュールに変換する責任を負います.

var path = require('path');

module.exports = {
   entry : './src/test.js',
    output: {
        filename : 'bundle.js',
        path : path.resolve(__dirname + '/build')
    },
    mode : 'none',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

4.Babyって何?

ES 6構文をES 5に変換するツール.
👉 変換ファイル:1つの言語で作成されたソースコードを類似レベルの言語に変換します(EX.Type Script=>JavaScript)

5.Babyを使う理由は？

最新の更新では、ES 6バージョンが大きな更新部分を占めています.
ES 6対応のブラウザが表示されます.このうち、Chrome、Safai、FireFox(98%)などのエラーブラウザでは、これまで最新の更新バージョンがサポートされていました.
しかし、ネット探検家11を利用する割合も11%程度と高いが、支援はない.そのため、古いバージョンのES 5バージョンに変更する必要があります.
したがって,開発環境を設定する際には,webpackとbabelを用いて基礎環境の設定と開発を行う必要がある.