webpack

本明細書は、https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html#Webパッケージとはによって参照される.
Webpackとは?
これは最新のfront-endフレームワークで最もよく使われるモジュールバンドルパッケージです.
モジュールバンドルパッケージとは?
Webアプリケーションを構成するHTML、CSS JS、IMGなどすべてを各モジュールと見なし、それらを1つの結果として組み合わせるツール.
モジュールとは
プログラミングの観点から特定の機能を持つ小さなユニットを見る.
似たような機能を有意義なファイルとして管理すると、モジュールになります.
Webpackのモジュールはjsモジュールに限らず、webアプリケーションを構成するすべてのリソースを指す.
Webpackの出現背景

ファイル単位でモジュール管理を行う必要があります.

Web開発タスク自動化ツール.

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

ファイル単位でモジュールを管理する必要がある
Webアプリケーションの作成には、複数のjsファイルが使用されます.
Webpackを使用しないと、複数のjsファイルが干渉したり受信したりしてエラーが発生する問題があります.Webpackを使用すると、相互干渉や受信ではなく、複数のファイルをモジュールとして管理できます.
Web開発タスク自動化ツール
front-end開発は,開発->ブラウザで確認->修正->ブラウザで確認する繰り返しである.
上記の一連の操作を容易にするために、コードを変更して保存すると、ブラウザに直接反映される自動化ツールが使用されます.(書かない場合は、コードを変更し、コードを保存し、ブラウザでリフレッシュを続行する必要があります.)
また、ファイル圧縮やフロントプロセッサ変換も処理できます.
Webアプリケーションの高速ロードと高性能
ユーザーがWebページを使用すると、画面が見えなくなり、ロード時間が3～5秒を超えると離れます.
ロード速度を速め、ブラウザからサーバに要求されるファイルの数を減らすために、webpackはこれらのファイルを圧縮します.
また、必要なリソースをロードするのではなく、後で使用するリソースで、Lazy Loadingリクエストが発生しました.
Webpackの4つの主要な属性

entry

output

loader

plugin

entry
WebpackからWebリソースを変換するために必要な最初のエントリポイント.

module.exports = {
  entry: "./src/index.js"
};

上のコードはwebpackを実行するsrcフォルダの下のindexです.これはjsに対してwebpack構築を実行し,SPAとして記述したコードであると仮定する.

entry: {
  login: './src/LoginView.js',
  main: './src/MainView.js'
}

上記のコードは、SPAではなく特定のページにアクセスすると、サーバが対応する情報を提供するMPAに適用されます.
output
これは、webpack後に生成された結果のファイルパスを返すことを意味します.

var path = require("path");

module.exports = {
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./dist")
  }
};

少なくともfilenameを定義する必要があります.通常はpathプロパティを一緒に定義します.
filenameはwebpackで構築されたファイルの名前を表し、path属性はファイルのパスを表す.
パスはパスNodeは、resolve()をパラメータに転送するパスを組み合わせて、有効なファイルパスを作成します.js APIです.
loader
WebpackがWebアプリケーションを解析する場合、Webリソース(HTML、CSS、IMG、Fontなど)を非JavaScriptファイルに変換できます.
あなたを助けます.

module.exports = {
  module: {
    rules: []
  }
};

上は基本スケルトン
css loaderを適用してみます.

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["css-loader"]
      }
    ]
  }
};

オブジェクトとしてrules配列に追加します.
オブジェクトにはtest propertyとuse propertyがあります.
testアプリケーション・ロードに使用されるファイル・タイプ(通常は正規表現を使用)
useは、ファイルに適用されるロードプログラムの名前です.
以上のコードを整理すると、プロジェクト内のすべてのcssファイルにcssローダが適用されることを意味します.

module: {
  rules: [
    {
      test: /\.scss$/,
      use: ["css-loader", "sass-loader"]
    }
  ];
}

特定のファイルタイプで複数のloaderを使用すると、上記のコードはアレイに表示されます.
を選択します.
plugin
Webpackの基本操作に追加の機能を提供します.
対応する結果の形態を変える役割を果たす.

module.exports = {
  plugins: []
};

plugin配列は、コンストラクション関数によって作成されたオブジェクトインスタンスのみを追加できます.