← Cloudflare Workers / workers / wrangler / migration / v1-to-v2 / wrangler-legacy

Webpack

Wrangler umožňuje vyvíjet moderní aplikace ES6 s podporou modulů. Tato podpora je možná díky webpack ↗ integrace. Tento dokument popisuje, jak Wrangler používá webpack k sestavení vašich Workers a jak můžete použít vlastní konfiguraci.

Toto je výchozí konfigurace webpacku, kterou Wrangler používá k sestavení vašeho Workeru:

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

"main" v package.json soubor určuje entry konfigurační hodnota. Pokud není definována nebo chybí, "main" má výchozí hodnotu index.js, což znamená, že entry má také výchozí hodnotu index.js.

Výchozí konfigurace nastavuje target na webworker. Toto je správná hodnota, protože Cloudflare Workers jsou navrženy tak, aby odpovídaly Service Worker API ↗. Přečtěte si dokumentace webpacku ↗ pro vysvětlení tohoto target hodnota.

Wrangleru můžete nařídit, aby použil vlastní konfigurační soubor webpack, nastavením webpack_config ve vašem souboru Wrangler. Vždy nastavte target na 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"

Je možné použít různé konfigurační soubory webpacku v různých Prostředí Wrangleru. Například "webpack.development.js" konfigurační soubor se používá během wrangler dev pro vývoj, ale při sestavování pro staging nebo produkční prostředí se používají jiné, produkčně připravenější konfigurace:

{
	"$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",
};

Příkazy Wrangleru se spouštějí z kořenového adresáře projektu. Ujistěte se, že váš entry a context jsou nastaveny správně. U projektu se strukturou:

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

Odpovídající webpack.config.js soubor by měl vypadat takto:

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

Pokud chcete použít vlastní implementaci existujícího globálního API, můžete shim ↗ modul třetí strany jako webpack plugin.

Můžete například chtít nahradit URL globální třídu s url-polyfill npm balíček. Po definování balíčku jako závislosti ve vašem package.json soubor a nainstalujte jej, přidejte záznam pluginu do konfigurace webpacku.

const webpack = require("webpack");

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

Pokud používáte [email protected] nebo starší, webpack.config.js soubor v kořenovém adresáři projektu se načítá automaticky. To není vždy zřejmé, a proto verze Wrangleru novější než [email protected] vyžadují, abyste zadali webpack_config hodnota ve vašem souboru Wrangler.

Když aktualizace z [email protected], můžete se setkat s varováními v konfiguraci webpacku. Vyřešíte to přidáním webpack_config = "webpack.config.js" do souboru Wrangler.