ChunksWebpackPlugin

chunks-webpack-pluginは、エントリポイントとチャンクの関係を持つHTMLファイルを作成し、webpackバンドルを提供します。複数のエントリポイントを含む複数ページのアプリケーションに適しています。

webpack 4以降、SplitChunksPluginはすべてのチャンクを最適化する可能性を提供します。これは、チャンクを非同期チャンクと非非同期チャンクの間でも共有できることを意味するため、特に強力になる可能性があります。詳細については、splitChunks.chunksのwebpackドキュメントを参照してください。

splitChunks.chunksオプションを設定すると、エントリポイントに関連付けられた新しいチャンクが自動的に生成されます。たとえば、エントリポイントa.jsとb.jsは、ファイルvendors~a~b.jsと共通のコードを共有します。

複数のエントリポイントがある場合、自動生成されたチャンクとエントリポイントの関係を特定するのは難しい場合があります。

chunks-webpack-pluginは、webpackコンパイルエントリポイントを解析して、エントリポイントに関連付けられたすべてのファイルを取得します。次に、エントリポイントとchunks-manifest.jsonファイルでフィルター処理されたすべてのアセットを含むHTMLファイルを生成します。

設定不要

設定なしで動作します。詳細な使用法については、設定の使用セクションを参照してください。

インストール

chunks-webpack-pluginは、npmでchunks-webpack-pluginとして、およびGitHubでchunks-webpack-pluginとして入手できます。

npm install chunks-webpack-plugin --save-dev

yarn add chunks-webpack-plugin --dev

警告 chunks-webpack-plugin@10はESMのみです。

注 サポートされている最小のNode.jsバージョンは16.20.0、Webpackは>=5.10.3です。

例

このプロジェクトには、./exampleディレクトリに最小限の例が含まれています。Webpackの例を実行し、プラグインの実装を確認するには、npm run build:exampleコマンドを実行します。

基本的な使い方

chunks-webpack-pluginは、エントリポイントごとに2つのHTMLファイルを生成します。各ファイル名にはエントリポイント名が含まれており、{{entry}}プレースホルダーは自動的に置き換えられます。

• {{entry}}-styles.html: すべてのHTML <link>タグを含みます。
• {{entry}}-scripts.html: すべてのHTML <script>タグを含みます。

まず、webpackの設定にこのプラグインを追加しましょう。

webpack.config.js

import ChunksWebpackPlugin from 'chunks-webpack-plugin';

export default {
  plugins: [new ChunksWebpackPlugin()]
};

HTMLファイルは、webpackのコンパイルの残りの部分と一緒に、出力パスディレクトリに作成されます。

これで、生成されたHTMLファイルをHTMLページテンプレートに含めることができます。例えば、Twigなどを使ってこれを行うことができます。

main-styles.html

<link rel="stylesheet" href="main.css" />

main-scripts.html

<script defer src="main.js"></script>

設定を使用する

設定オブジェクトをchunks-webpack-pluginに渡して、デフォルト設定を上書きすることができます。

filename

型

type filename = string;

デフォルト: '[name]-[type].html'

生成されるファイルのファイル名をカスタマイズするかどうかをプラグインに指示します。ファイルはwebpackコンパイルによって処理され、出力パスディレクトリに生成されます。プレースホルダー[name]はエントリポイント名で自動的に置き換えられ、[type]はstyles|scriptsで置き換えられます。

new ChunksWebpackPlugin({
  filename: 'templates/[name]-[type].html'
});

注意 filenameはディレクトリを含むことができ、それらは自動的に作成されます。

templateStyle

型

type templateStyle = (name: string, entryName: string) => string;

デフォルト

(name) => `<link rel="stylesheet" href="${name}" />`;

HTML <style>タグのデフォルトテンプレートをカスタマイズするかどうかをプラグインに指示します。例えば、追加の属性やCDNプレフィックスを追加することができます。

export default {
  plugins: [
    new ChunksWebpackPlugin({
      templateStyle: (name) => `<link rel="stylesheet" href="https://cdn.domain.com${name}" />`
    })
  ]
};

templateScript

型

type templateScript = (name: string, entryName: string) => string;

デフォルト

(name) => `<script defer src="${name}"></script>`;

HTML <script>タグのデフォルトテンプレートをカスタマイズするかどうかをプラグインに指示します。例えば、追加の属性やCDNプレフィックスを追加することができます。

export default {
  plugins: [
    new ChunksWebpackPlugin({
      templateScript: (name) => `<script defer src="https://cdn.domain.com${name}"></script>`
    })
  ]
};

generateChunksManifest

型

type generateChunksManifest = boolean;

デフォルト: false

chunks-manifest.jsonを生成するかどうかをプラグインに指示します。このファイルには、エントリポイントでグループ化されたすべてのチャンクのリストが含まれています。chunks-manifest.jsonの例を参照してください。

export default {
  plugins: [
    new ChunksWebpackPlugin({
      generateChunksManifest: true
    })
  ]
};

generateChunksFiles

型

type generateChunksFiles = boolean;

デフォルト: true

HTMLファイルを生成するかどうかをプラグインに指示します。

export default {
  plugins: [
    new ChunksWebpackPlugin({
      generateChunksFiles: false
    })
  ]
};

警告 falseに設定すると、HTMLファイルは生成されません。HTMLファイルのカスタム生成のためにgenerateChunksManifestオプションがtrueに設定されている場合のみ有用です。

import ChunksWebpackPlugin from 'chunks-webpack-plugin';
import path from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: {
    home: 'home.js',
    news: 'news.js'
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  },
  plugins: [new ChunksWebpackPlugin()],
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

<link rel="stylesheet" href="vendors~home~news.css" />
<link rel="stylesheet" href="home.css" />

<script defer src="vendors~home~news.js"></script>
<script defer src="home.js"></script>

<link rel="stylesheet" href="vendors~home~news.css" />
<link rel="stylesheet" href="news.css" />

<script defer src="vendors~home~news.js"></script>
<script defer src="news.js"></script>

ライセンス

chunks-webpack-pluginはMITライセンスの下でライセンスされています。

♥ by @yoriiis によって作成されました。