コンテンツにスキップ

Webpack

Wranglerを使用すると、モジュールをサポートした現代的なES6アプリケーションを開発できます。このサポートは、Wranglerのwebpack ↗統合によって可能になります。このドキュメントでは、Wranglerがどのようにwebpackを使用してあなたのWorkersをビルドし、どのように独自の設定を持ち込むことができるかを説明します。

妥当なデフォルト

これは、WranglerがあなたのWorkerをビルドするために使用するデフォルトのwebpack設定です：

module.exports = {
  target: "webworker",
  entry: "./index.js", // package.jsonの"main"から推測される
};

package.jsonファイルの"main"フィールドは、entry設定値を決定します。未定義または欠落している場合、"main"はindex.jsにデフォルト設定され、つまりentryもindex.jsにデフォルト設定されます。

デフォルト設定では、targetがwebworkerに設定されています。これは、Cloudflare WorkersがService Worker API ↗に一致するように構築されているため、正しい値です。このtarget値の説明については、webpackのドキュメント ↗を参照してください。

独自の設定を持ち込む

Wranglerにカスタムwebpack設定ファイルを使用させるには、wrangler.tomlファイルでwebpack_configを設定します。常にtargetをwebworkerに設定してください。

例

module.exports = {
  target: 'webworker',
  entry: './index.js',
  mode: 'production',
};
type = "webpack"
name = "my-worker"
account_id = "12345678901234567890"
workers_dev = true
webpack_config = "webpack.config.js"

複数の環境を持つ例

異なるWrangler環境内で異なるwebpack設定ファイルを使用することが可能です。たとえば、wrangler devの開発中に使用される"webpack.development.js"設定ファイルがありますが、ステージングまたは本番環境のビルド時には、他のより本番向けの設定が使用されます：

type = "webpack"
name = "my-worker-dev"
account_id = "12345678901234567890"
workers_dev = true
webpack_config = "webpack.development.js"


[env.staging]
name = "my-worker-staging"
webpack_config = "webpack.staging.js"


[env.production]
name = "my-worker-production"
webpack_config = "webpack.production.js"
module.exports = {
  target: 'webworker',
  devtool: 'cheap-module-source-map', // "eval"を避ける：Workers環境では許可されていない
  entry: './index.js',
  mode: 'development',
};
module.exports = {
  target: 'webworker',
  entry: './index.js',
  mode: 'production',
};

Workers Sitesとの併用

Wranglerコマンドはプロジェクトのルートから実行されます。entryとcontextが適切に設定されていることを確認してください。構造が次のようなプロジェクトの場合：

.
├── public
│   ├── 404.html
│   └── index.html
├── workers-site
│   ├── index.js
│   ├── package-lock.json
│   ├── package.json
│   └── webpack.config.js
└── wrangler.toml

対応するwebpack.config.jsファイルは次のようになります：

module.exports = {
  context: __dirname,
  target: 'webworker',
  entry: './index.js',
  mode: 'production',
};

グローバルのシミュレーション

既存のグローバルAPIの独自の実装を持ち込みたい場合、サードパーティモジュールをwebpackプラグインとしてシム ↗することができます。

たとえば、URLグローバルクラスをurl-polyfill npmパッケージで置き換えたい場合があります。パッケージをpackage.jsonファイルの依存関係として定義し、インストールした後、webpack設定にプラグインエントリを追加します。

webpackプラグインを使用した例

const webpack = require('webpack');


module.exports = {
  target: 'webworker',
  entry: './index.js',
  mode: 'production',
  plugins: [
    new webpack.ProvidePlugin({
      URL: 'url-polyfill',
    }),
  ],
};

後方互換性

wrangler@1.6.0以前を使用している場合、プロジェクトのルートにあるwebpack.config.jsファイルは自動的に読み込まれます。これは常に明白ではないため、wrangler@1.6.0以降のバージョンでは、wrangler.tomlファイルにwebpack_config値を指定する必要があります。

wrangler@1.6.0からのアップグレード時に、webpack設定の警告が表示されることがあります。これを解決するには、wrangler.tomlファイルにwebpack_config = "webpack.config.js"を追加してください。

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings