Webpack 5入門

Webpackとは
Webpackは最新のJavaScriptアプリケーションの静的モジュールバンドルです.WebPackがアプリケーションを処理するときは、プロジェクトに必要なすべてのモジュール(NodeThangモジュール、画像、CSSなど)をマップし、1つ以上のバンドルを生成する依存グラフを内部的に構築します.
モジュールバンドル- JavaScriptとその依存関係を取り、単一の/複数のファイル(ブラウザで使用する)にそれらをバンドルします.
依存グラフ-それが使用されるか、参照される順序/階層に基づくファイル間のすべての依存関係をマップするグラフ.

Webpack builds and loads modules synchronously. It converts dependencies into modules and pulls the dependencies and modules at the right time in the right scope. Finally, it loads all these modules and dependencies into one or few files and downloads it in the browser (when requested).

WebPackは、プロジェクトをバンドルする設定ファイルが必要です.Webpackは、デフォルトではNPMを使用してインストールするとデフォルトの設定を行います.しかし、Webpackを使用すると、プロジェクトのニーズと要件に基づいて、それを信じられないほど設定することができます.
基本的なWebpack設定ファイルは次のようになります.
< div >
< wp > WebPackの設定を理解し始めるためには、まずWebPackのコア概念を知る必要があります.
< OL >

エントリー

出力

ローダー

プラグイン

モード

< OL >
< H 4 >

モード
<高橋潤子>
このパラメータを使用すると、Webpackに対応する環境の組み込み最適化を識別して追加できます.modeパラメータのデフォルト値は'生成'.p >
三つのモードがあります.
< OL >

生産

開発

none -任意のデフォルト/組み込みの最適化を追加しません

< OL >
クラスをハイライト表示する

module.exports = {
  mode: 'development'
}

< div >
< H 4 >

エントリー
<高橋潤子>
エントリは、WebPackが内部依存グラフを作成し始めるための開始点/初期値です.このWebpackに基づいて、エントリポイントが依存する他のモジュール、ライブラリ、および資産を把握しますbr/>
<> P >
クラスをハイライト表示する

module.exports = {
  mode: 'development',
  entry: "./path/to/my/entry/file.js"
}

< div >
< H 4 >

出力
<高橋潤子>
出力プロパティは、WebPackにどのバンドルを作成するか、どのようにバンドルされたファイルの名前を保存するかを指示します.このプロパティは、JavaScriptファイルにのみ適用されます.
<> P >
クラスをハイライト表示する

module.exports = {
  mode: 'development',
  entry: "./path/to/my/entry/file.js",
  output: {
   path: path.resolve(__dirname, 'dist'),
   filename: [name].js,
 }
}

< div >
< H 4 >

ローダー
<高橋潤子>
ローダを使ってファイルをインポートしたりロードしたりして、他の静的リソース(例えば. png、. img、. css、. sassなど)を束ねることができます.p >
Loaderは他のビルドツールのタスクのようで、フロントエンドのビルドステップを処理する強力な方法を提供します.これは別の言語からJavaScriptまたは負荷のインラインイメージのデータURLとしてファイルを変換することができます.JavaScriptモジュールから直接CSSファイルをインポートすることもできますbr/>
<> P >
クラスをハイライト表示する

module.exports = {
  mode: 'development',
  entry: "./path/to/my/entry/file.js",
  output: {
   path: path.resolve(__dirname, 'dist'),
   filename: [name].js,
 },
 module: {
  rules: [
   { test: /\.css$/, use: ['style-loader', 'css-loader'] },
  ],
 }
}

< div >
< p >' module 'プロパティはローダとその設定を表すために使われる.p >
プロパティは、異なる種類のローダを含むオブジェクトのリストです.ルールプロパティの各項目( object )には' test 'と' use 'が含まれます.p >
プロパティは、正規表現を受け取り、指定されたローダを実行します.p >
< p >' use 'プロパティは指定されたファイルタイプの実行/変換に使用されるローダ型の値をとります.p >
上記のコードスニペットでは、CSSファイルの種類をチェックし、CSSローダーとスタイルローダを使用して(ブラウザで使用する)コードを変換します.CSSローダは'@ import ', ' url ()を解釈して解決します.スタイルローダは、CSSをDOMに注入します.(スタイルを取り、HTMLでスタイルタグを作成)
< H 4 >

プラグイン
<高橋潤子>
プラグインは、Webpackのコンパイルプロセスにカスタムビルドをタップ/注入する強力な方法を提供します.プラグインは、各コンパイル全体で起動されるキーイベントにフックすることができますbr/>
プラグインはウェブパックのバックボーンです.Webpack自体は、WebPackの設定で使用するのと同じプラグインシステムに組み込まれていますbr/>
<> P >
クラスをハイライト表示する

module.exports = {
  mode: 'development'
  entry: "./path/to/my/entry/file.js",
  output: {
   path: path.resolve(__dirname, 'dist'),
   filename: [name].js,
 },
 module: {
  rules: [
   { test: /\.css$/, use: ['style-loader', 'css-loader'] }
  ]
 },
 plugins: [
  new HtmlWebpackPlugin({
   template: "./src/index.html"
  })
 ]
}

< div >
プロパティはプラグインの新しいインスタンスのリストです.各プラグインのインスタンスには、新しいインスタンスで渡す必要のある引数/オプションがあります.p >
上記のコードスニペットでは、プラグインはHTML HTMLファイル(./src/index . html )に基づいて新しいHTMLファイルを作成し、出力フォルダ(./dist )に置きます.p >
< H 3 >

ローダとプラグインの違い
<高橋潤子>
Loaderは指定したファイルタイプの前処理変換を行います.ローダーは、個々のレベルまたはバンドルの前に生成される生成されます.ローダは実際のビルドプロセスに影響を与えません.p >
プラグインは、バンドル生成プロセスの終了後に実行されます.プラグインはどのようにバンドルが作成されているかを変更できます.p >
< H >

なぜwebpack
<高橋潤子>
Webpackを使用するための最初で最も重要な理由は、フロントエンドのビルドプロセスを完全に制御して、ボイラープレートを構築するのに役立ちます.また、開発者のための既製アプリは、反応、角度、およびVueのような主要なフレームワークを使用してコーディングを開始するのに役立ちます.p >
Webpackのローダを使用して、最新のJavaScript構文を矢印関数やスプレッド演算子などを使用して、後に(バンドル生成中に)変換されます.p >
開発モードでは、Webpackも完全にモジュール全体を再読み込みせずにモジュールを更新'ホットモジュールの置換'を提供します.これは、変更されたものを更新するだけで開発時間を節約します.p >
< p >それはコードを最適化して最小化するために使用されます.したがって、ブラウザでより速くファイル/塊をダウンロードして、ダウンロードします.すべてのこれらのプロセスと変換は非常に短い時間で単一のビルドプロセスで実行されますp >
< wp >ウェブサイトの特徴と利点は、今後の記事で詳しく説明します.p >
< H >

レポリンク
<高橋潤子>
< P >https://github.com/yadhus/Introduction-to-Webpack-5

< H >

次の記事
<高橋潤子>
< P/>
< H >

参考文献
<高橋潤子>
< P >https://webpack.js.org/concepts/

https://webpack.js.org/api/

https://webpack.js.org/configuration/

https://stackoverflow.com/questions/37452402/webpack-loaders-vs-plugins-whats-the-difference