モジュールシステムとwebpack設定//20210412

1.モジュール化システム

1）説明

コンポーネントモジュール化.コードソース全体を実行するのではなく、各コードソースをモジュール化し、必要なコードのみをロードして

を実行します.

モジュール化により、コードのメンテナンスが簡素化され、高可用性が提供されます.

コードの上部で応答呼び出し

を行う必要がある.
他の場所で使用するには、

コードの下部でコンポーネントをモジュール化してエクスポートする必要があります.

// WordRelay.jsx
const React = require('react');// 사용할 리액트 호출
...
module.exports = wordRelay; // export로 모듈화

2）モジュール化の問題

jsxファイルがたくさんあってもhtmlでは1つのjsxファイルsrc しか参照できません.
したがって、

は、webpackを使用してjsxファイルを1つのファイル

にマージする.

2.webpacの設定

は基本的にwebpackです.config.jsで

を設定

const path = require('path'); // node path설정
module.export = {
  name : 'wordrelay-setting',
  mode : 'development',
  devtool : 'eval',
  resolve : {
    extensions : ['.js', '.jsx']
    },
  entry : {
    app : ['.client'],
  }
  output : {
    path : path.join(__dirname, 'dist'),
    filename : 'app.js'
    },
  };

2-1. コードの説明

1)path:配線.Node機能は、出力に表示されるappです.jsのパスの設定
2)name:コンビネーションモジュール名
3)モード:モード説明.開発は開発のためです.サービスに使用されるのは「本番」です
4)devtool:開発ツール.evalはただ速いという意味です
5)ソリューション:拡張子(拡張子)を設定します.entryファイルの拡張子の設定
6)entry:Webパッケージにマージするファイル.サンプルコードのclient.jsxとwordRelay.jsxは合併しますが、clientではwordRelayです.jsxを呼び出すので1つだけ書きます
7)出力:合成の最終結果.pathに配線します.名前をfilenameに設定します.