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

1434 ワード
テキストリンク

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に設定します.
    依存性注入🐠
    PHP 7.1からデフォルトで有効になる「Zend Signals」とは何か