Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Document/automate how to migrate from a Wrangler 1 webpack_config / webpack integration to Wrangler 2 #8

Closed
Tracked by #12
threepointone opened this issue Nov 15, 2021 · 11 comments
Assignees

Comments

@threepointone
Copy link
Contributor

wrangler v2 deprecates the type and webpack_config configurations, and it's overall webpack integration story.

  • This has historically been a pain point both internally and externally. We haven't been able to update the webpack version (v4) because of breaking changes, and it scares away people from using wrangler in the first place.
  • The other two values for type - javascript and rust don't make much sense anymore since it's really the same thing backing it. And we're going to encourage development in multiple languages (Go, python, what have you) since we want to have the best wasm support ever.
  • Because we now ship esbuild, we can automatically provide support for a number of features that bundlers are typically used for: modules, jsx, typescript, etc.

TODO: as part of the effort to be backward compatible, we should have a super low-effort transition guide to moving existing webpack projects to the new wrangler (ideally, we should be able to automate it with a single command/codemod).

@threepointone threepointone mentioned this issue Nov 16, 2021
27 tasks
@Electroid Electroid added this to the 2.0 milestone Jan 20, 2022
@petebacondarwin petebacondarwin moved this to Non-blocking in workers-sdk Jan 25, 2022
@threepointone threepointone moved this from Non-blocking to Blocking in workers-sdk Jan 27, 2022
@Electroid Electroid removed this from the 2.0 milestone Jan 31, 2022
@petebacondarwin petebacondarwin added this to the Wrangler 2.0 milestone Feb 1, 2022
@petebacondarwin petebacondarwin changed the title [DEPRECATION] type / webpack_config / webpack integration Document/automate how to migrate from a Wrangler 1 webpack_config / webpack integration to Wrangler 2 Mar 7, 2022
@touhidurrr
Copy link

So, since webpack_config is deprecated, what do I use?

@touhidurrr
Copy link

I want wrangler use webpack on production mode

@petebacondarwin
Copy link
Contributor

In Wrangler 2, we use esbuild to bundle the code into a single file (more or less) for uploading to Cloudflare.
So for the majority of cases this completely replaces the webpack bundling in Wrangler 1.
But if you really need to use webpack then our recommended approach is to add it as a prepublish step. There a many ways to implement that but here is one...

In package.json use:

"scripts" {
  "publish": "webpack && wrangler publish",
  "dev": "concurrently -p --kill-others \"webpack --watch\" \"wrangler dev\""
}

@touhidurrr
Copy link

touhidurrr commented Mar 13, 2022

In Wrangler 2, we use esbuild to bundle the code into a single file (more or less) for uploading to Cloudflare. So for the majority of cases this completely replaces the webpack bundling in Wrangler 1. But if you really need to use webpack then our recommended approach is to add it as a prepublish step. There a many ways to implement that but here is one...

In package.json use:

"scripts" {
  "publish": "webpack && wrangler publish",
  "dev": "concurrently -p --kill-others \"webpack --watch\" \"wrangler dev\""
}

Never heard about esbuild before. I have some questions.
About esbuild....

  1. Does it have Some kind of command that gives the same functionality as webpack's production mode?
  2. Do you guys allow config customization for esbuild?

About the default behaviour of wrangler2...

  1. What is the default index file for wrangler2? wrangler2 publish throws errors.
  2. How to set default wrangler2 index file. Previously custom webpack config file was used I think.
  3. Can I you guys make wrangler2 save is output file? Like a customizable output path for testing it’s behaviour.

About development Pipeline...

  1. I want to use Github Workflows for publishing my project. What Authentication method do you suggest? Surely wrangler2 login isn't an option. Or do you suggest Cloudflare API?

@petebacondarwin
Copy link
Contributor

petebacondarwin commented Mar 13, 2022

Does it have Some kind of command that gives the same functionality as webpack's production mode?

The output of esbuild is a bundled file where imports have been inlined (mostly) similar to webpack. Currently we are not minifying the output. What production mode features of webpack are you looking for here?

Do you guys allow config customization for esbuild?

For now we are treating the bundler as an internal implementation aspect of Wrangler 2. So at the moment we are not allowing the bundling to be extended. There is an issue to track this: #234.

What is the default index file for wrangler2?

There is no default index file for Wrangler 2. It must be configured...

How to set default wrangler2 index file.

You can specify the entry-point index file for a Worker in a variety of ways:

Can I you guys make wrangler2 save is output file? Like a customizable output path for testing it’s behaviour.

Currently we do not have a facility to save the output from the bundling to disk.
We would like to improve the testing and debugging story for Workers. There is this issue about improving debugging: #573

I want to use Github Workflows for publishing my project. What Authentication method do you suggest? Surely wrangler2 login isn't an option. Or do you suggest Cloudflare API?

If you are publishing from a CI where you cannot have an interactive login, you can currently specify an API token via the CLOUDFLARE_API_TOKEN environment variable.

@touhidurrr
Copy link

Ok also I read esbuild docs. If you are using esbuild treating as an internal package then I guess it doesn’t honor esbuild features like browser parameter in package.json. Or, does it do since it’s being executed from the same path as the package.json file?

@petebacondarwin
Copy link
Contributor

We pass all the options to esbuild programmatically, so it should not be reading anything from package.json. (And if it is then that is a bug!)

@petebacondarwin
Copy link
Contributor

@petebacondarwin petebacondarwin self-assigned this Mar 26, 2022
@caass caass assigned caass and unassigned petebacondarwin Mar 30, 2022
@petebacondarwin petebacondarwin moved this from Must-have to In Progress in workers-sdk Apr 13, 2022
@threepointone threepointone moved this from In Progress to In Review in workers-sdk Apr 14, 2022
@caass
Copy link
Contributor

caass commented Apr 14, 2022

@touhidurrr this should be fixed via #759, can you let us know if the webpack plugin works as expected?

@touhidurrr
Copy link

touhidurrr commented Apr 14, 2022

@touhidurrr this should be fixed via #759, can you let us know if the webpack plugin works as expected?

Dunno actually. Already moved to esbuild cause the build time is much faster than webpack. 😅

I tried esbuild after you guys talked about it and got used to using it.

@threepointone
Copy link
Contributor Author

Closing this anyway. Thank you @caass!

Repository owner moved this from In Review to Done in workers-sdk Apr 14, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants