1. 迁移 webpack 项目

本指南描述将 webpack 项目从 Wrangler v1 迁移到 Wrangler v2 的步骤。完成本指南后，更新 Wrangler 版本。

早期版本的 Wrangler 通过 Wrangler 配置文件 中的 type 和 webpack_config 键提供对 webpack ↗ 的基础支持。从 Wrangler v2 开始，Wrangler 不再支持 type 和 webpack_config 键，但你仍然可以在 Workers 中使用 webpack。

作为在 Workers 中使用 webpack 的开发者，你可能属于以下四类之一：

1. 我使用 [build] 在 Wrangler 外部运行 webpack（或其他 bundler）。。

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] 键，因此你的 Worker 将继续使用你自己的设置进行构建。

Wrangler 将继续处理。从 Wrangler 文件中移除 type = webpack。

从 Wrangler v2 开始，Wrangler 内置支持此用例。有关更多详情，请参阅打包。

Workers 运行时处理 JSX 和 TypeScript。你可以将所需的任何模块 import 到代码中，Workers 运行时会自动将它们包含在构建的 Worker 中。

你应该从 Wrangler 文件中移除 type 和 webpack_config 键。

Wrangler v2 不再支持项目类型，包括 type = webpack 以及通过 webpack_config 键进行的配置。如果你的 webpack 配置执行的操作超出添加 loader（例如 TypeScript），你将需要维护自定义 webpack 配置。长期来看，你应该迁移到外部 [build] 流程。短期来看，按照以下说明，仍然可以在较新版本的 Wrangler 中复现 Wrangler v1 的构建步骤。

1. 将 wranglerjs-compat-webpack-plugin ↗ 添加为 devDependency。

wrangler-js ↗ 作为与 Wrangler v1 ↗ 分开发布的库，是一个 Node 脚本，为你配置并执行 webpack 4 ↗。当你设置 type = webpack 时，Wrangler v1 会为你执行此脚本。我们已将功能移植到新包 wranglerjs-compat-webpack-plugin ↗，你可以将其用作 webpack 插件 ↗。

为此，你需要将其添加为依赖：

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. 将 wranglerjs-compat-webpack-plugin 添加到 webpack.config.js。

修改 webpack.config.js 文件以包含你刚安装的插件。

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

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

3. 向 package.json 添加构建脚本。

{
	"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. 告诉 Wrangler 如何打包 Worker。

Wrangler 不再了解如何构建 Worker。你需要告诉它如何调用 webpack 以及在哪里查找 webpack 的输出。这转化为两个字段：

{
	"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 以测试配置是否按预期工作。