Webpack

Wrangler は、モジュール対応のモダンな ES6 アプリケーションを開発できます。この対応は、Wrangler の webpack ↗ 連携によるものです。このドキュメントでは、Wrangler が webpack で Worker をビルドする仕組みと、独自の設定を持ち込む方法を説明します。

実用的なデフォルト

Wrangler が Worker のビルドに使う、既定の webpack 設定です。

module.exports = {
	target: "webworker",
	entry: "./index.js", // inferred from "main" in package.json
};

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

既定設定では target を webworker にします。Cloudflare Workers は Service Worker API ↗ に合わせて作られているため、この値が正しいです。この target 値の説明は、webpack のドキュメント ↗ を参照してください。

独自の設定を使う

Wrangler ファイルで webpack_config を設定すると、独自の webpack 設定ファイルを使えます。target は常に webworker にしてください。

例

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

{
	"$schema": "./node_modules/wrangler/config-schema.json",
	"type": "webpack",
	"name": "my-worker",
	"account_id": "12345678901234567890",
	"workers_dev": true,
	"webpack_config": "webpack.config.js"
}

"$schema" = "./node_modules/wrangler/config-schema.json"
type = "webpack"
name = "my-worker"
account_id = "12345678901234567890"
workers_dev = true
webpack_config = "webpack.config.js"

複数環境での例

異なる Wrangler 環境で、異なる webpack 設定ファイルを使えます。たとえば、開発時の wrangler dev では "webpack.development.js" を使い、ステージングや本番向けのビルドでは、より本番向けの設定を使います。

{
	"$schema": "./node_modules/wrangler/config-schema.json",
	"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"
		},
		"production": {
			"name": "my-worker-production",
			"webpack_config": "webpack.production.js"
		}
	}
}

"$schema" = "./node_modules/wrangler/config-schema.json"
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", // avoid "eval": Workers environment doesn’t allow it
	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",
		}),
	],
};

後方互換性

[email protected] 以前を使っている場合、プロジェクトルートの webpack.config.js が自動で読み込まれます。これは分かりにくいことがあるため、[email protected] より後の Wrangler では、Wrangler ファイルに webpack_config の値を指定する必要があります。

[email protected] からアップグレードするときに、webpack 設定の警告が出ることがあります。解決するには、Wrangler ファイルに webpack_config = "webpack.config.js" を追加します。