1. webpack プロジェクトを移行する

このガイドでは、webpack プロジェクトを Wrangler v1 から Wrangler v2 へ移行する手順を説明します。完了したら、Wrangler のバージョンを更新 してください。

以前の Wrangler は、Wrangler 設定ファイル の type と webpack_config キーで、webpack ↗ を簡易的にサポートしていました。Wrangler v2 以降、Wrangler は type と webpack_config キーをサポートしません。ただし、Workers で webpack を使い続けることはできます。

webpack を Workers と一緒に使っている場合、次の 4 つのどれかに当てはまることが多いです。

1. [build] を使って webpack（または別のバンドラー）を wrangler の外で実行している

2. type = webpack を使っているが、設定は自分で用意せず Wrangler に任せている

3. type = webpack と webpack_config = <path/to/webpack.config.js> を使い、JSX、TypeScript、WebAssembly、HTML ファイルなどの非標準ファイルを処理している

4. type = webpack と webpack_config = <path/to/webpack.config.js> を使い、コード変換やその他のコード変更を行っている

どれにも当てはまらない場合は、issue を作成 ↗ してください。状況に合わせてサポートし、今後の読者向けにこのガイドを改善できます。

Wrangler v2 は [build] キーをサポートしているため、Workers はこれまでどおり自分のセットアップでビルドされます。

Wrangler が引き続き担当します。Wrangler ファイルから type = webpack を削除してください。

Wrangler v2 以降、Wrangler はこの用途を組み込みでサポートしています。詳細は バンドリング を参照してください。

Workers ランタイムは JSX と TypeScript を扱います。必要なモジュールはコードへ import でき、Workers ランタイムはビルドした Worker に自動で含めます。

Wrangler ファイルから type と webpack_config キーを削除してください。

Wrangler v2 は、type = webpack を含むプロジェクトタイプと、webpack_config キーによる設定のサポートを終了しました。webpack の設定がローダーの追加（TypeScript 用など）を超える処理をする場合は、カスタム webpack 設定を自分で維持する必要があります。長期的には、外部の [build] プロセスへ移行 してください。短期的には、次の手順で Wrangler v1 のビルド手順を新しい Wrangler でも再現できます。

1. wranglerjs-compat-webpack-plugin ↗ を devDependency として追加します。

wrangler-js ↗ は、Wrangler v1 ↗ とは別ライブラリとして提供されていた Node スクリプトで、webpack 4 ↗ を設定して実行します。type = webpack を設定すると、Wrangler v1 がこのスクリプトを実行していました。この機能は新しいパッケージ wranglerjs-compat-webpack-plugin ↗ に移植されており、webpack plugin ↗ として使えます。

そのため、依存関係として追加します。

npm i -D webpack@^4.46.0 webpack-cli wranglerjs-compat-webpack-plugin

yarn add -D webpack@^4.46.0 webpack-cli wranglerjs-compat-webpack-plugin

pnpm add -D webpack@^4.46.0 webpack-cli wranglerjs-compat-webpack-plugin

bun add -d webpack@^4.46.0 webpack-cli wranglerjs-compat-webpack-plugin

package.json ファイルに、次のように反映されます。

{
	"name": "my-worker",
	"version": "x.y.z",
	// ...
	"devDependencies": {
		// ...
		"wranglerjs-compat-webpack-plugin": "^x.y.z",
		"webpack": "^4.46.0",
		"webpack-cli": "^x.y.z"
	}
}

2. webpack.config.js に wranglerjs-compat-webpack-plugin を追加します。

インストールしたプラグインを含めるよう、webpack.config.js ファイルを変更します。

const {
	WranglerJsCompatWebpackPlugin,
} = require("wranglerjs-compat-webpack-plugin");

module.exports = {
	// ...
	plugins: [new WranglerJsCompatWebpackPlugin()],
};

3. package.json に build スクリプトを追加します。

{
	"name": "my-worker",
	"version": "2.0.0",
	// ...
	"scripts": {
		"build": "webpack" // <-- Add this line!
		// ...
	}
}

4. Wrangler 設定ファイル から、サポートされていない項目を削除します。

Wrangler ファイルから type と webpack_config キーを削除します。これらはもうサポートされていません。

{
	// Remove these!
	"type": "webpack",
	"webpack_config": "webpack.config.js"
}

type = "webpack"
webpack_config = "webpack.config.js"

5. Worker のバンドル方法を Wrangler に伝えます。

Wrangler は、Worker のビルド方法を把握しなくなりました。webpack の呼び出し方と、webpack の出力先を伝える必要があります。これは次の 2 つのフィールドになります。

{
	"main": "./worker/script.js", // by default, or whatever file webpack outputs
	"build": {
		"command": "npm run build" // or "yarn build"
	}
}

main = "./worker/script.js"

[build]
command = "npm run build"

6. プロジェクトをテストします。

npx wrangler deploy を実行し、設定が想定どおり動くか確認します。