Webpackを使用して単純な静的サイトをバンドルする方法

webpack：静的サイト開発の合理化

非常に人気のあるJavaScriptモジュールバンドラー（55,000 Github Stars！）であるWebpackは、ReactやAngularなどのフレームワークを使用して大規模なプロジェクトに関連していることがよくあります。ただし、そのバンドル機能は、より小さな静的サイトにとって等しく有益です。 この記事では、Webpackを活用して、単純な静的サイトの最適化されたバンドルを作成し、パフォーマンスを改善し、HTTPリクエストを削減する方法を示しています。

静的サイトにWebpackを使用することの重要な利点：

HTTPリクエストの削減：
• 複数の資産（JavaScript、CSS、画像）をバンドルの少ないものに統合し、ページの読み込み時間を高速化します。 縮小：
コードから不要な文字を削除することにより、ファイルサイズを削減します。
• トランスピレーション：最新のJavaScript構文（ES6）を使用しながら、古いブラウザー（ES5）との互換性を確保します。
• 単純化された資産管理：多様な資産を管理するための構造化されたアプローチを提供します。
オートメーション：
• 自動ビルドプロセス用のNPMスクリプトとシームレスに統合します。
Webpackの設定：

前提条件：

node.jsおよびnpm（またはNVMのようなノードバージョンマネージャー）をインストールする必要があります。 プロジェクトのセットアップ：

プロジェクトディレクトリを作成し、サンプルプロジェクト（GitHubから）をクローンするか、独自の基本的なHTML、CSS、およびJavaScriptファイルを作成します。

1. webpackのインストール：
ディレクトリ構造：
2. バンドル出力を保持するためにフォルダーを作成します。
3. npm install webpack webpack-cli --save-dev基本的なWebpack構成（
）：
4. この構成は、エントリポイント（dist）、ビルドモード（
）、および出力ディレクトリとファイル名を指定します。

ビルドプロセスの自動：

ビルドスクリプトを：webpack.config.jsに追加します

さて、

module.exports = {
  entry: './src/js/app.js',
  mode: 'development',
  output: {
    path: `${__dirname}/dist`,
    filename: 'bundle.js',
  },
};

を実行すると、Webpackビルドプロセスが実行されます。

app.jsdevelopmenthtmlにバンドルを含む：

バンドルファイル（

フォルダーにある）を使用して、HTML内の個々のJavaScriptファイルへの参照を置き換えます。

package.json

追加資産（CSS、画像、フォント）のバンドリング：

"scripts": {
  "build": "webpack"
}

npm run buildWebpackはローダーを使用して、さまざまなファイルタイプを処理します。 CSSをバンドルするには、

および

（）をインストールし、ルールを：

に追加します

module.exports = {
  entry: './src/js/app.js',
  mode: 'development',
  output: {
    path: `${__dirname}/dist`,
    filename: 'bundle.js',
  },
};

画像とフォントの場合、

は有用です（url-loader）。npm install --save-dev url-loader

生産の最適化：

inmode: 'production'に切り替えて、削除やその他の最適化を有効にします。 さらなるCSSの最適化については、webpack.config.jsおよびoptimize-css-assets-webpack-plugin terser-webpack-plugin

高度なテクニック（簡単な概要）：

コードの分割：
• コードを小さなチャンクに分割して、負荷時間を改善します。 Hot Moduleの交換（HMR）：
フルページのリロードなしでブラウザでコードの変更を更新します（Webpack devサーバーが必要です）。 異なるページのさまざまなバンドル：
• さまざまなページの個別のバンドルを作成して、各ページにダウンロードされたコードの量を削減します。 このガイドは、静的サイト開発にWebpackを使用することに関する基本的な理解を提供します。 高度な機能とプラグインのさらなる調査により、さらに最適化と効率が向上します。 詳細情報と最新のベストプラクティスについては、公式のWebpackドキュメントをご覧ください。

以上がWebpackを使用して単純な静的サイトをバンドルする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。