-
Notifications
You must be signed in to change notification settings - Fork 803
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Cass Fridkin
committed
Apr 9, 2022
1 parent
c12cf44
commit 2cc2f6d
Showing
1 changed file
with
96 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,97 @@ | ||
## [WIP] Removing `type = "webpack"` / `webpack_config` from `wrangler.toml` | ||
## Migrating webpack projects to `wrangler v2` | ||
|
||
If you were previously using `type ="webpack"` in `wrangler.toml`, this document describes the modifications to make to your project in newer versions of `wrangler`. | ||
Previous versions of `wrangler` offered rudimentary support for [webpack](https://webpack.js.org/) with the `type` and `webpack_config` keys in [`wrangler.toml`](configuration.md). Starting with version 2, `wrangler` no longer supports the `type` and `webpack_config` keys, but you can still use webpack with your workers! | ||
|
||
Odds are, you (an intrepid developer using webpack with Workers) fall into one of four categories: | ||
|
||
1. [I use `[build]` to run webpack (or another bundler) external to wrangler.](#i-use-build-to-run-webpack-or-another-bundler-external-to-wrangler) | ||
|
||
2. [I use `type = webpack`, but don't provide my own configuration and let `wrangler` take care of it.](#i-use-type--webpack-but-dont-provide-my-own-configuration-and-let-wrangler-take-care-of-it) | ||
|
||
3. [I use `type = webpack` and `webpack_config = <path/to/webpack.config.js>` to handle JSX, Typescript, WebAssembly, HTML files, and other non-standard filetypes.](#i-use-type--webpack-and-webpack_config--pathtowebpackconfigjs-to-handle-jsx-typescript-webassembly-html-files-and-other-non-standard-filetypes) | ||
|
||
4. [I use `type = webpack` and `webpack_config = <path/to/webpack.config.js>` to perform code-transforms and/or other code-modifying functionality.](#i-use-type--webpack-and-webpack_config--pathtowebpackconfigjs-to-perform-code-transforms-andor-other-code-modifying-functionality) | ||
|
||
If you don't fall into any of those categories, please [file an issue](https://github.com/cloudflare/wrangler2/issues/new/choose) so we can help you out and improve our documentation! | ||
|
||
### I use `[build]` to run webpack (or another bundler) external to wrangler. | ||
|
||
`wrangler` 2 supports the `[build]` key, so your workers will continue to build using your own setup. | ||
|
||
### I use `type = webpack`, but don't provide my own configuration and let `wrangler` take care of it. | ||
|
||
Good news! `wrangler` will continue to take care of it. Simply remove `type = webpack` from your `wrangler.toml`. | ||
|
||
### I use `type = webpack` and `webpack_config = <path/to/webpack.config.js>` to handle JSX, Typescript, WebAssembly, HTML files, and other non-standard filetypes. | ||
|
||
New versions of `wrangler` ship with built-in support for this usecase thanks to our [module system](module-system.md). | ||
|
||
We'll handle JSX and Typescript, and you can simply `import` any modules you need into your code and we'll include them in the built worker automatically. | ||
|
||
You should remove the `type` and `webpack_config` keys from your `wrangler.toml`. | ||
|
||
### I use `type = webpack` and `webpack_config = <path/to/webpack.config.js>` to perform code-transforms and/or other code-modifying functionality. | ||
|
||
`wrangler` 2 drops support for project types, including `type = webpack` and configuration via the `webpack_config` key. If your webpack configuration does things beyond adding loaders for e.g. Typescript, you'll need to maintain your custom Webpack configuration. In the long term, you should [migrate to an external `[build]` process](custom-builds.md), but in the short term it's still possible to reproduce `wrangler` 1's build steps in newer versions of `wrangler` by following the steps below. | ||
|
||
1. Add [wrangler-js](https://www.npmjs.com/package/wrangler-js) as a `devDependency` | ||
|
||
[wrangler-js](https://www.npmjs.com/package/wrangler-js), shipped as a separate library from [wrangler 1](https://www.npmjs.com/package/@cloudflare/wrangler/v/1.19.11), is a simple Node script that configures and executes [webpack 4](https://unpkg.com/browse/[email protected]/package.json) for you. When you set `type = webpack`, wrangler 1 would execute this script for you. Now you'll have to execute it manually. | ||
|
||
To do that, you'll need to add it as a dependency: | ||
|
||
```sh | ||
npm install --save-dev wrangler-js | ||
# or | ||
yarn add --dev wrangler-js | ||
``` | ||
|
||
You should see this reflected in your package.json: | ||
|
||
```json | ||
{ | ||
"name": "my-worker", | ||
"version": "2.0.0", | ||
// ... | ||
"devDependencies": { | ||
// ... | ||
"wrangler-js": "^0.1.11" | ||
} | ||
} | ||
``` | ||
|
||
2. Add a build script your `package.json` | ||
|
||
wrangler-js can be executed as a script, so you should add it to your package.json: | ||
|
||
```json | ||
{ | ||
"name": "my-worker", | ||
"verion": "2.0.0", | ||
// ... | ||
"scripts": { | ||
"build": "wrangler-js" // <-- Add this line! | ||
// ... | ||
} | ||
} | ||
``` | ||
|
||
3. Remove unsupported entires from your `wrangler.toml` | ||
|
||
Remove the `type` and `webpack_config` keys from your `wrangler.toml`, as they're not supported anymore. You'll instead want to use the `[build]` key to run wrangler-js directly. | ||
|
||
```toml | ||
# Remove these! | ||
type = "webpack" | ||
webpack_config = "webpack.config.js" | ||
``` | ||
|
||
If you have multiple webpack configurations (e.g. for different environments) you should comment them out for now, rather than removing them entirely. We'll need to know which config belongs to what in the next step. | ||
|
||
4. Add a `[build]` entry to your `wrangler.toml` | ||
|
||
You'll need to call wrangler-js explicitly, which means you'll need to supply command-line args that wrangler 1 used to specify for you. wrangler-js accepts the following command line args: | ||
|
||
- `--webpack-config` | ||
- This flag tells wrangler-js where to look for your webpack configuration. You MUST specify a path, relative to the project root. | ||
- Example: `--webpack-config="path/to/webpack.config.js"` |