WebpackでBabyコンセプトを使う

Babyは?

JavaScript compiler

babelはJavaScriptで結果を生成するコンパイラです.

2015年にリリースされたES 6ポストバージョン(ESNext)の新しい構文を既存のブラウザで使用するにはbabelを使用する必要があります.

babelではJSX(react)、スタティックタイプ言語(Type Script)、コード圧縮、推奨フェーズ構文などを使用できます.

設定

npm i -D @babel/core
npm i -D @babel/cli
npm i -D @babel/preset-env 
npm i -D @babel/preset-react

@babel/core:babelコア機能を備えた必須パッケージ
@babel/cli:ヘルプ端末babelコマンドの使用
@babel/prefet-env:コード構文変換(サポートされているブラウザ占有率、互換性設定など)の設定を支援
@babelプリセット-react:JSXファイルをコンパイルするためのreactプリセット

npm i -D webpack webpack-cli webpack-dev-server
npm i -D babel-loader css-loader file-loader
npm i -D html-webpack-plugin mini-css-extract-plugin
npm i -D sass sass-loader

Webpackと併用する場合
Webpack:webpackモジュール
Webpack-cli:ヘルプ端末のwebpackコマンドの使用
Webpack-dev-server:nodemon Webpack環境で開発サーバを作成する
babel-loader:Webパッケージとバーベルのバインド
css-loader:Webパッケージのcssファイルの読み取りを支援
file-loader:画像をロードするためのWebパッケージのファイルのロードを支援します.
html-webpack-plugin:バインドされたhtmlファイルにcssとjsファイルを追加
mini-css-extract-plugin:style-loader htmlのスタイルラベルの代わりに、個別のcssファイルを使用して生成
sass-loader:Webパッケージのsassファイルの読み取りを支援
それ以外にも、いろいろな使用をインストールすることができます.

Webpack設定

babelには多くの実現方法がある.
たとえば、@babel/cliを使用して実行してもよいし、@babel/coreを直接実行してもよいし、@babel/registerを使用して実行してもよい.Webpackでbabel-loaderとして実行する方法について説明します.

const path = require('path');
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')

module.exports = {
    name: 'word-relay-setting',
    mode: 'development',  //실서비스 : production
    devtool: 'eval',
    resolve:{
        extensions:['.js', '.jsx', '.css']
    },
    entry: {
        app:['./client'],
    },
    module: {
        rules:[{
            test:/\.jsx?$/,
            loader:'babel-loader',
            options:{
                presets:[
                    ['@babel/preset-env', {
                        targets:{
                            browsers:['> 1% in KR'],
                        },
                        debug: true,
                    }],
                     '@babel/preset-react'],
                plugins:[
                    //babel이 최신문법을 옛날것으로 바꿀때, 핫 리로딩까지 추가.
                    'react-refresh/babel',
            ],
            },
        }],
    },

    plugins:[
        new RefreshWebpackPlugin(),
    ],

    //출력
    output:{
        //현재 폴터와 dist 경로 합쳐줌.
        path:path.join(__dirname, 'dist'),
        filename:'app.js',
        publicPath:'/dist/',
    },

    //서버설정
    devServer:{
        publicPath:'/dist/',
        hot: true,
    },
};

pathはnodeです.jsのコアモジュールは、パスに関連する様々な機能を提供します.
現在の目標はclientです.jsxとwordrelay.jsxはアプリケーションをマージします.jsで実行されます.

entryはバインドするモジュールのエントリファイルです.現在のクライアント.jsxはwordRelayを読み込み中です.だからentryのアプリにclientだけ入れておけばいいのです.

moduleはentryファイルを読み込み、moduleをoutputに適用します.moduleのrulesは配列形式で存在する.testは正規表現を使用してターゲットファイルのフォーマットを指定します.loaderはbabelルールを適用し、loaderをターゲットファイルに適用します.
optionsではbableのオプションを設定できます.presetsは、@babel/prefut-envと@babel/prefut-reactを使用する多くのプラグインの組み合わせです.

outputは、バインド後に出力するファイルのパスとファイル名を指定するだけです.

Babel-polyfill

poliyfillは、ブラウザでサポートされていない機能に互換性タスクを埋め込むことを意味します.

bableは変換構文の役割のみを実行します.

最新の関数を使用するにはbabel-polyfillを使用する必要があります.

すなわち、babelはコンパイル時に実行され、babel-polyfillは実行時(ブラウザで実行)に実行されます.実行時に必要な機能を追加します.

['@babel/preset-env', 
 {
   targets:{
     //한국에서 점유율 5%이상인 브라우저 지원
     //'last 5 chrome versions' -> 크롬 최신에서 5버전 전까지만 지원
     browsers:['> 1% in KR'],
   },
   debug: true,
 }],

上に示すコードでは、この部分は塗りつぶしが追加された部分です.
@babel/prefet-envは、適切な束ファイルサイズを維持し、マルチセグメントペンの追加の負担を軽減します->ターゲット構文の作成
chanyeong