システムのバンドルと構築

10160 ワード
テキストリンク
bundler
大量のダイナミックインタラクティブな大型Webサービスの出現に伴い、数十行のコード、数百のJSファイルの管理がますます困難になり、以下の問題が発生した.
  • グローバル範囲における数百のJavaScriptファイルの重複宣言
  • 数百のJavaScriptファイルによる遅いロード
  • 手動Web開発プロセス(ファイル、画像圧縮/CSSフロントプロセッサ変換等)
    • これらの問題を解決するためにBundlerが現れた.
    バンドルバッグ(bundler)とは、
    これは、Webアプリケーションを構成するすべてのリソースを1つのファイル(バンドル)にパッケージ化するツールであり、使用時に以下の利点を得ることができることを意味します.
  • モジュール単位でコード
    • を記述する.
  • ネットワークボトルネックの緩和(最適化)
  • Web開発タスク自動化
    • バンドルパッケージの種類には、Webパッケージ、Rollup、Parcel、Browserifyがあります.
    Webパッケージ
  • Entry
  • Webパッケージは、Webリソースを変換するために必要な最初のエントリポイントであり、JavaScriptファイルパスでもあります.
  • Webアプリケーションの全体的な構造と内容が含まれています.Webパッケージは、このファイルを使用して、Webアプリケーションで使用されるモジュール間の関連を理解および分析するため、アプリケーションを正常に動作させることができるコンテンツを含む必要があります.
  • 複数ページのアプリケーションのエントリポイントは、複数であってもよい.
    • // webpack.config.js
// 웹팩을 실행했을 때 src 폴더 밑의 index.js 을 대상으로 웹팩이 빌드를 수행하는 코드
module.exports = {
  entry: './src/index.js'
}
  • Output
  • Webパッケージの結果のファイルパスを返します.
  • オブジェクトとしてオプションを追加する必要があります.
  • は少なくともfilename(웸팩으로 빌드한 파일의 이름)を指定し、一般にpath(해당 파일의 경로)の属性を定義します.
    • // webpack.config.js
var path = require('path');

module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
    // path.resolve() 는 인자로 넘어온 경로들을 조합하여 유효한 파일 경로를 만들어주는 Node.js API
  }
}
  • Loader
  • プロパティ
    • では、JavaScriptファイルではなくWebリソース(HTML、CSS、Images、フォントなど)を変換できます.
    入力属性または出力属性とは異なり、名前はmoduleです.
    複数の
  • ローダを使用する場合は、rulesアレイにオプションを追加できます.
  • の複数のローダが使用されている場合は、右から左の順に適用されます.
    • // webpack.config.js
module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        // test: 로더를 적용할 파일 유형 (일반적으로 정규 표현식 사용)
        // use: 해당 파일에 적용할 로더의 이름
        test: /\.css$/,
        use: ['css-loader']
      }
    ]
  }
}
  • Plugins
    プロパティは、
  • Webパッケージの基本動作に追加機能を提供します.
  • ローダーはファイルの解析と変換を担当し、プラグインは結果の形式を変更する責任を負います.
  • プラグインの配列には、コンストラクション関数によって作成されたオブジェクトインスタンスしか追加できません.
    • // webpack.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    // 웹팩으로 빌드한 결과물로 HTML 파일을 생성해주는 플러그인
    new HtmlWebpackPlugin(),
    // 웹팩의 빌드 진행율을 표시해주는 플러그인
    new webpack.ProgressPlugin()
  ]
}
  • Mode
  • webパッケージ設定を定義する場合、modeプロパティを定義してwebパッケージの実行モードを設定します.
  • none(모드 설정 안 함) development(개발 모드) production(배포 모드): 기본값
  • Webパッケージプロファイルが1つしかない場合に、実行モードに従って特定の設定
    • を適用する方法
    // webpack.config.js
module.exports = (env) => {
  let entryPath = env.mode === 'production'
    ? './public/index.js'
    : './src/index.js';

  return {
    entry: entryPath,
    output: {},
    // ...
  }
}
    // package.json
{
  "build": "webpack",
  "development": "npm run build -- --env.mode=development",
  "production": "npm run build -- --env.mode=production"
}
    Advanced
  • リソースマッピングとは?
    :配置用に構築されたファイルを元のファイルに関連付ける機能.
    :ソースマッピングを使用して、デプロイに使用するファイルの特定の部分がソースファイルのどの部分であるかを決定します.
    : ソースマッピング設定オプション比較テーブル 
    • // webpack.config.js
module.exports = {
  devtool: 'cheap-eval-source-map'
}
  • Webpackの必須要素は何ですか?
    :以上の5つのコンポーネントに基づいています.
  • ホットモジュールの交換とは?
    :ブラウザをリフレッシュすることなく、生成された結果をWebアプリケーションにリアルタイムで反映できるようにする設定です.
    • // webpack.config.js
module.exports = {
  devServer: {
    hot: true
  }
}
    myemployeesを使用します.sqlはsql言語の条件クエリーを行う
    Androidはtokenでログイン状態を維持