WEBパック学習1週目

8298 ワード
テキストリンク

📌 勉強の原因


個人的なプロジェクトはCRA(Create-React-APP)の設定と進行により、Webパッケージの存在が分かりましたし、CRAも誰かが設置したWebパッケージなので、後でプロジェクトをカスタマイズする必要があることがあれば、Webパッケージの使用を学ぶべきだと思います.
また、求人広告を探している場合は、ウェブパッケージのようなモジュールバンドルパッケージを使用する資格があります.そこで,インフラストラクチャ上で先端開発環境学習の求人記事を見て参加を決め,学習を行った.この研究はプロジェクト環境を独自に構築できる能力を目標としている.
今後は学習の過程で得られた知識に基づいて文章を書く.
第1週のテーマ
Webpackの公式文書または参考資料を表示してWebpackを学習および整理する

📌 Webパッケージとは?


Webパッケージは、最新のWebアプリケーション用のモジュールバインドツールであり、モジュールバインドは、Webアプリケーションを構成するすべてのリソースを1つのモジュールと見なし、これらのモジュールを組み合わせて統合した結果を形成します.

上の図に示すように、Webパッケージは、Webアプリケーション開発に必要な、HTML、Javascript、css、画像などのコンテンツを組み合わせています.

📖 なぜWebパッケージが必要ですか?


Webパッケージが必要な理由は大きく3つあります.
JavaScriptモジュールを
  • ファイル単位で管理する必要がある
  • Web開発タスク自動化ツール(Web Task Manager)
  • Webアプリケーションの高速ロードと高性能

    • JavaScriptモジュールをファイル単位で管理する必要がある


    既存の場合、javascriptコードをロードすると、scriptタグを使用して対応するjavascriptファイルがロードされます.
    <!-- index.html -->
<html>
  <head>
    <title>Test</title>
  </head>
  <body></body>

  <script src="./a.js"></script>
  <script src="./b.js"></script>
  <script>
    console.log('test=', test);
  </script>
</html>
    //a.js
var test = 20;
    //b.js
var test = 30;
    この方式の問題は,JavaScript変数や関数などがグローバル有効範囲であるため,競合が発生し,値が汚染されて問題が発生する可能性があるということである.
    上記の問題を解決するために、以下の方法がある.
  • IIFE(インスタント実行関数)を使用します.
  • はAMD、Common JS、UMDなどのモジュールシステムを採用している.
  • script type=“module”.
    • Common JSは主にサーバ側で使用されているが、ES 6はimport exportを使用した標準モジュールシステムを発売しているため、AMD、UMDは使用されない傾向にある.したがって、scriptラベルではtype=「module」を使用できますが、インターネットexplorerなどのブラウザではサポートされていないため、ウェブパッケージを使用してバンドルすることが望ましいです.

    Web開発タスク自動化ツール（Web Task Manager）


    開発時には、容量を減らすためにHTML、CSS、JS、画像を圧縮し、SASSなどのCSSフロントプロセッサをCSSに変換する必要がある.しかし、これらの変更が発生するたびに、コードの修正や保存、リフレッシュなどの操作を手動で実行する必要があり、自動化のためにGruntやGulpのようなツールが登場しています.しかし、これらの自動化ツールが登場した後、Webパッケージが必要になったのは、これらの自動化ツールの機能と依存関係管理が不十分であるため、Webパッケージを使用してパッケージ間の依存関係を管理するとともに、モジュールを最適化し、構築速度を速めるためである.
    自動化ツール+最適化+高速=Webパッケージ
    Web Pack公式文書では,コード剥離,キャッシュ技術による構築速度の最適化,高速化の方法を紹介した.その後、私は自分でプロジェクトを設定して、この部分を適用して位置決めします.

    Webアプリケーションの高速ロードと高性能


    これまで、ブラウザがサーバに大量のファイルを要求したため、Webサイトのロード速度が遅くなりました.
    ブラウザごとにサーバにしか送信できないHTTPリクエストの数は限られているからです.たとえば、Chrome、Safari、FireFoxブラウザは最大6回です.したがって、送信された要求が要求の数より多い場合は、先に発行された要求が終了してから送信することができる.
    ブラウザ最大接続回数プローブ72プローブ8~96プローブ10、118、13クロム6糸パリ6オペラ6火狐6
  • Webパッケージを適用する前に

    Chromeでは、最大リクエスト数が6であるため、最大6回のリクエストが完了した後に以下のリソースをリクエストすることができ、完了時間が長くなります.
  • Webパッケージの適用後

    Webパッケージを適用すると、cssファイルとjsファイルがbundleにバインドされます.jsを用いることで,要求回数自体が14回から6回に減少したため,完了時間も大幅に短縮された.

    • 📌 Webパッケージの主なプロパティ


    📖 EntryとOutput

    const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};
    Webパッケージは1つの起点から,依存性に応じて必要なモジュールを組み合わせて結果を生成する.
    以上のコードは、このパスのfileです.jsという名前のエントリ(entry)を介して、特定のパス内でmy-first-webpack.bundle.js(output)は結果を生成する設定です.

    📖 Loader


    import構文を使用して、画像、JavaScript、CSS、フォントをJavaScriptコードにインポートできます.Webパッケージはすべてのファイルをモジュールと見なしているため、importを使用してインポートできます.これはLoaderのおかげです.
    module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
    ],
  },
};
    上記のコードでは、css-loaderでcssをロードし、ts-loaderでtypescriptをjavascriptに変換できます.

    📖 Plugins


    プラグインは、バンドルされた成果物を処理するのに役立ちます.
    const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};
    上記のコードではhtml-webpack-pluginがhtmlファイルに生成された結果を自動的に注入する役割を果たすため、よく使用され、構築自体のプロセスにかかわる.

    📖 Mode


    Webパッケージでは、modeプロパティを使用して開発、生産モデルを決定し、各モデルに対する最適化オプションを使用できます.選択肢はありませんが、あまり使いにくいようです.

    📌 の最後の部分


    1週目はそれぞれの調査内容をもとに情報を発表し収集したが,主にWebパッケージとWebパッケージの主なキーワードを用いた理由である.これに基づいて、2週目のテーマは、loader、plugin、entry、outputなどのWebパッケージの主なプロパティを直接使用して簡単なプロジェクト設定を行うことです.

    References


    https://webpack.js.org/concepts/
    https://joshua1988.github.io/webpack-guide/
    https://jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html
    https://www.youtube.com/watch?v=WQue1AN93YU
    弾性ScrollView
    Javaオブジェクトの圧縮、解凍