Webpack を使用してマルチページ アプリケーションを構築するコード例

この記事では、webpack を使用して複数ページのアプリケーションを構築するためのコード例を紹介します。これには一定の参考価値があります。必要な友人は参照できます。お役に立てば幸いです。

背景: フロントエンド分野では、react、vue、angular の 3 つの主要なフロントエンド フレームワークがより安定してきたため、SPA アプリケーションがますます多くのプロジェクトに適用されています。ただし、一部の特殊なアプリケーション シナリオでは、従来のマルチページ アプリケーションを使用する必要があります。プロジェクトのエンジニアリング構築に Webpack を使用する場合は、それに応じた調整も必要です。

SPA アプリケーションとの違い

SPA アプリケーションでは、webpack を使用してプロジェクトをビルドした後、html ファイル、複数の js ファイル、および複数の css ファイルが生成されます。 html ファイルでは、すべての js ファイルと css ファイルが参照されます。 \
複数ページのアプリケーションでは、webpack を使用してプロジェクトをビルドすると、複数の html ファイル、複数の js ファイル、および複数の css ファイルが生成されます。各 html ファイルでは、そのページに対応する js ファイルと css ファイルのみが参照されます。

Webpack 設定

エントリ設定

マルチページ アプリケーションのパッケージ化は、複数のエントリ js ファイルと複数の html テンプレート ファイルに対応します。開発ステータスのマルチページ ディレクトリが次のようになっていると仮定します。

    |--page1
        |--index.html
        |--index.js
        |--index.less
    |--page2
        |--index.html
        |--index.js
        |--index.less

には、page1 と page2 の 2 つのページと、それらに対応する js# # が含まれています。 # および less ファイル。 webpack を使用してプロジェクトをビルドすると、2 つのエントリ ファイル page1->index.js と page2->index.js が存在します。 ##page1->index.html と page2->index.html は 2 つのテンプレート ファイルです。ただし、プロジェクトをビルドする場合、各ページのエントリ構成を指定することはできません。 \すべてのページ エントリとテンプレート ファイルを自動的に照合するには、2 つの方法があります。 \\
方法 1:
node
の fs ファイル システムを使用します。親フォルダーの下にあるすべてのサブフォルダーを読み取ります。すべてのページはフォルダー名によって自動的に照合されます。ただし、この方法では、親フォルダー内のファイルをクリーンな状態に保つ必要があります。それ以外の場合は、特定の判断ロジックを使用して、すべてのエントリ ディレクトリをフィルタリングする必要があります。 \\方法 2: 構成ファイルを使用して入り口を構成します。例:

    entry: ['page1', 'page2'];

これにより、すべてのエントリ ディレクトリを正確に指定できます。ただし、ページを追加するたびに、構成ファイルを変更する必要があります。 \どちらの方法にも独自の特徴があり、特定の状況に応じて選択できます。

特定の構成

エントリ

エントリ構成は、取得したエントリ データに基づいて周期的に追加する必要があります。

    const entryData = {};
    entry.forEach(function (item) {
        entryData[item] = path.join(__dirname, `../src/pages/${item}/index.js`);
    })

output

出力構成は SPA アプリケーションと一致しており、特別な構成は必要ありません。

    output: {
        filename: 'public/[name]_[chunkhash:8].js',
        path: path.join(__dirname, `../dist/`),
        publicPath: '/'
    },

HtmlWebpackPlugin

webpack

を使用してビルドする場合。プロジェクト テンプレートを生成するには、html-webpack-plugin プラグインを使用する必要があります。複数のテンプレートを生成する必要がある複数ページのアプリケーションの場合は、複数の html テンプレート ファイルも生成する必要があります。同様に、取得したエントリーファイルのデータを使用してループに追加します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">    const HtmlWebpackPlugin = require('html-webpack-plugin');     const HtmlWebpackPluginData = [];     entry.forEach(function (item) {         HtmlWebpackPluginData.push(             new HtmlWebpackPlugin({                 filename: `${item}.html`,                 template: path.join(__dirname, `../src/pages/${item}/index.html`),                 chunks: [item]             })         );     })</pre><div class="contentsignin">ログイン後にコピー</div></div>構成では

chunks

を構成する必要があります。構成されていない場合、すべての js および css ファイルが各テンプレート ファイルにインポートされます。 entry で設定 name として指定した場合、エントリに関連するファイルのみがインポートされます。 構成の組み合わせ

次のステップでは、前の

entry

、output、htmlWebpackPlugin 構成を組み合わせます。 、他の構成は SPA アプリケーションと一貫性があり、個別に処理する必要はありません。組み合わせは次のとおりです。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">    modules.exports = {         entry: { ...entryData },         output: {             filename: 'public/[name]_[chunkhash:8].js',             path: path.join(__dirname, `../dist/`),             publicPath: '/'         },         plugins: [             ...HtmlWebpackPluginData         ]         ...     }</pre><div class="contentsignin">ログイン後にコピー</div></div>完全なデモはご覧いただけます

マルチページ アプリケーションのデモ

以上がWebpack を使用してマルチページ アプリケーションを構築するコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。