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，你可以告诉 Wrangler 使用自定义 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 插件中将第三方模块填充（shim） ↗到其位置。

例如，你可能想用 url-polyfill npm 包替换 URL 全局类。在 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"。