Webpackを使用して複数ページのプログラムを構築するための実装手順

webpack を使用してシングルページのプログラムを構築することは非常に一般的ですが、実際の開発では複数ページのプログラムを開発する必要もあるため、webpack を使用して複数ページのプログラムを構築する方法を勉強しました。

原理

各ページが配置されているフォルダーを個別の単一ページプログラムディレクトリとして扱い、複数のエントリと html-webpack-plugin を構成して複数ページのパッケージ化を実現します。

以下はこのプロジェクトのディレクトリ構造です

。
├─ 出典
│ └─ ページ
│ ├─ について
│ │ ├─ index.css
│ │ ├─ index.html
│ │ └─ index.js
│ └─ インデックス
│ ├─ index.css
│ ├─ 索引.html
│ └─ index.js
└─ webpack.config.js

シングルページパッケージの基本構成

まず、シングルページアプリケーション用の webpack の基本構成を見てみましょう。

HtmlWebpackPlugin は 'html-webpack-plugin' を必要とします。

モジュール.エクスポート = {
 エントリ: './src/index.js',
 プラグイン: [
  新しいHtmlWebpackプラグイン({
   テンプレート: './src/index.html',
   ファイル名: 'index.html',
  }）、
 ]、
 出力: {
  パス: path.resolve(__dirname, './dist'),
  ファイル名: 'bundle.js',
 },
};

複数ページのアプリケーションに変更するには、単一エントリと単一 HTML テンプレートを複数エントリと複数 HTML テンプレートに変更する必要があります。

マルチページパッケージの基本構成

改修工事の入り口

従来の複数エントリの記述は、キーと値のペアの形式で記述できます。

モジュール.エクスポート = {
 エントリー: {
  インデックス: './src/pages/index/index.js',
  about: './src/pages/about/index.js',
 },
 ...
}

このように記述すると、ページが追加されるたびに手動でエントリを追加する必要があり、面倒です。そのため、ディレクトリに基づいてエントリを生成する関数を定義して、操作を簡素化することができます。

定数glob = require('glob');

関数 getEntry() {
 定数エントリ = {};
 glob.sync('./src/pages/**/index.js').forEach((ファイル) => {
  定数name = file.match(/\/pages\/(.+)\/index.js/)[1];
  entry[name] = ファイル;
 });
 戻りエントリ。
}

モジュール.エクスポート = {
 エントリ: getEntry(),
 ...
}

変換出力

出力設定では、出力ファイル名をハードコードすることは適切ではなくなったため、ソースファイル名と一致するように名前を変更する必要があります。

モジュール.エクスポート = {
 ...
 出力: {
  パス: path.resolve(__dirname, './dist'),
  ファイル名: 'js/[name].[contenthash].js',
 },
 ...
}

複数のhtml-webpack-pluginsを設定する

エントリと同様に、異なるHTMLテンプレートをプラグイン設定に直接書き込むことができます。ここでは、jsが間違ったHTMLに挿入されるのを防ぐために、プラグインごとに異なるチャンクを設定する必要があります。

HtmlWebpackPlugin は 'html-webpack-plugin' を必要とします。

モジュール.エクスポート = {
 ...
 プラグイン: [
  新しいHtmlWebpackプラグイン({
   テンプレート: './src/pages/index/index.html',
   チャンク: ['インデックス'],
   ファイル名: 'index.html',
  }）、
  新しいHtmlWebpackプラグイン({
   テンプレート: './src/pages/about/index.html',
   チャンク: ['約'],
   ファイル名: 'about.html',
  }）、
 ]、
 ...
};

このアプローチはエントリと同じ問題を抱えているため、この構成を生成するための別の関数を定義します。

HtmlWebpackPlugin は 'html-webpack-plugin' を必要とします。
const glob = require('glob');

関数 getHtmlTemplate() {
 グロブを返す
  .sync('./src/pages/**/index.html')
  .map((ファイル) => {
   戻り値: name: file.match(/\/pages\/(.+)\/index.html/)[1], path: file };
  })
  。地図（
   （テンプレート） =>
    新しいHtmlWebpackプラグイン({
     テンプレート: template.path、
     チャンク: [template.name.toString()],
     ファイル名: `${template.name}.html`,
    })
  );
}

 
モジュール.エクスポート = {
 ...
 プラグイン: [...getHtmlTemplate()],
 ...
};

このようなシンプルなマルチページプロジェクトが構成されました。これをベースにホットアップデートやコード分割などの機能を追加することもできます。ご興味があれば、ぜひご自身で試してみてください。

完全な構成

プロジェクトアドレス: xmy6364/webpack-multipage

// webpack.config.js

定数パス = require('path');
HtmlWebpackPlugin は 'html-webpack-plugin' を必要とします。
const glob = require('glob');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

//複数ページエントリ関数 getEntry() {
 定数エントリ = {};
 glob.sync('./src/pages/**/index.js').forEach((ファイル) => {
  定数name = file.match(/\/pages\/(.+)\/index.js/)[1];
  entry[name] = ファイル;
 });
 戻りエントリ。
}

// 複数ページテンプレート関数 getHtmlTemplate() {
 グロブを返す
  .sync('./src/pages/**/index.html')
  .map((ファイル) => {
   戻り値: name: file.match(/\/pages\/(.+)\/index.html/)[1], path: file };
  })
  。地図（
   (テンプレート) =>
    新しいHtmlWebpackプラグイン({
     テンプレート: template.path、
     チャンク: [template.name.toString()],
     ファイル名: `${template.name}.html`,
    })
  );
}

定数設定 = {
 モード: 'production'、
 エントリ: getEntry(),
 出力: {
  パス: path.resolve(__dirname, './dist'),
  ファイル名: 'js/[name].[contenthash].js',
 },
 モジュール: {
  ルール:
   {
    テスト: /\.css$/,
    使用: ['style-loader', 'css-loader'],
   },
  ]、
 },
 プラグイン: [新しい CleanWebpackPlugin()、...getHtmlTemplate()]、
 開発サーバー: {
  コンテンツベース: path.join(__dirname, 'dist'),
  圧縮: true、
  ポート: 3000、
  ホット：本当、
  オープン: 真、
 },
};

モジュールをエクスポートします。

これで、Webpack を使用して複数ページのプログラムを構築する実装手順に関するこの記事は終了です。Webpack を使用した複数ページの構築に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: