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

Webpack

Wrangler позволяет разрабатывать современные приложения ES6 с поддержкой модулей. Это стало возможным благодаря webpack ↗ интеграция. В этом документе описано, как Wrangler использует webpack для сборки Workers и как можно использовать собственную конфигурацию.

Вот конфигурация webpack по умолчанию, которую Wrangler использует для сборки вашего Worker:

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

"main" поле в package.json файл определяет entry значение конфигурации. Если оно не задано или отсутствует, "main" по умолчанию равно index.js, то есть entry также по умолчанию равно index.js.

Конфигурация по умолчанию задаёт target к webworker. Это правильное значение, поскольку Cloudflare Workers создан так, чтобы соответствовать Service Worker API ↗. См. документация по webpack ↗ для объяснения этого target значение.

Wrangler можно указать использование пользовательского конфигурационного файла webpack, задав webpack_config в файле Wrangler. Всегда указывайте 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"

Вы можете использовать разные файлы конфигурации webpack в разных Окружения Wrangler. Например, "webpack.development.js" файл конфигурации используется при wrangler dev для разработки, но при сборке для окружений staging или production используются другие, более готовые к продакшену конфигурации:

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

Команды 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.

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 файл в корне вашего проекта загружается автоматически. Это не всегда очевидно, поэтому в версиях Wrangler после [email protected] требуют указать webpack_config значение в вашем файле Wrangler.

Когда обновление с [email protected], вы можете столкнуться с предупреждениями конфигурации webpack. Чтобы это исправить, добавьте webpack_config = "webpack.config.js" в файл Wrangler.