Wrangler: Webpack: configuration in folders

[xtuc]

Based on https://github.com/cloudflare/wrangler/wiki/Draft-Webpack-design; following #69.

We have (virtually or not) a Webpack configuration at the root of the workspace, which defines the entrypoint.

If we want the user to configure Webpack locally in each folder and we merge all the configurations in-memory. Since the workspace is considered as a single Webpack tree, the merged configuration will apply to everything.

Here are a few ideas:

1. Let the user merge it in the folder Webpack configuration; this doesn't fix the issue.

2. Each loaders has a test property where we can add the folder path, so only files in that folder will be affected with these rules; doesn't work with plugins.

3. Hook into Webpack and try to insolate the compiler ourselves; is that even feasable?
   3.1. build each folder as a seperate DLL/project and link them in the root.

[tmikaeld]

I'm guessing this is about webpack config files not being supported in generated projects right now.

I'd also suggest adding defaults to remove code that doesn't apply to workers.

webpack.config

  node: {
    console: false,
    process: false,
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    Buffer: false,
  }

I saw in the docs that a few polyfills are added due to webpack assuming things..

https://workers.cloudflare.com/docs/tutorials/build-a-serverless-function/media/publish.gif

[xtuc]

Using a Webpack config is supported, Wrangler will use it (if project is type Webpack; by default).

[tmikaeld]

Alright, I'll test it out then. I still think the defaults should be updated to get smaller deployment scripts. Webpack also include readable-stream which only apply to Node, but I've not been able to find how to exclude it.

EDIT: Found it, just set stream: false.

[xtuc]

If I remember correctly, auto polyfiling has been removed in newer webpack versions (probably 5).

[tills13]

Using a Webpack config is supported, Wrangler will use it (if project is type Webpack; by default).

perhaps unrelated - but is Wrangler looking for a specific config name (e.g. webpack.config.js)? I'm using a TypeScript webpack config (webpack.config.ts) and it fails building

./src/index.ts 5:9
Module parse failed: Unexpected token (5:9)
You may need an appropriate loader to handle this file type.

edit: I see it's looking for webpack.config.js

https://github.com/cloudflare/wrangler/blob/aaa6d45310f47194569ed4be20d410178fa6de33/wranglerjs/index.js#L22

[xtuc]

@tills13 could you please open a seperate issue about webpack.config.babel.js or webpack.config.js?

[thomasfr]

Using a Webpack config is supported, Wrangler will use it (if project is type Webpack; by default).

perhaps unrelated - but is Wrangler looking for a specific config name (e.g. webpack.config.js)? I'm using a TypeScript webpack config (webpack.config.ts) and it fails building

./src/index.ts 5:9
Module parse failed: Unexpected token (5:9)
You may need an appropriate loader to handle this file type.

edit: I see it's looking for webpack.config.js

https://github.com/cloudflare/wrangler/blob/aaa6d45310f47194569ed4be20d410178fa6de33/wranglerjs/index.js#L22

@tills13 did you manage to get wrangler to work with typescript? Would you mind to share your webpack config for it? would be great.

To the cloudflare/wrangler team: Do you plan to support TypeScript when generating a new project?

[tills13]

@thomasfr

I did not - I was playing around with building the webpack.config.ts before running wrangler but decided that it was going to be more effort than I was willing to put in at the time. Given the adoption of TypeScript in the JS community, I would like to see CF add native support for it rather than run my own hack-y solution.

For now, we use either the tried-and-true copy / paste your distributable into the Workers console (😱) or the Worker API.

[thomasfr]

@thomasfr

I did not - I was playing around with building the webpack.config.ts before running wrangler but decided that it was going to be more effort than I was willing to put in at the time. Given the adoption of TypeScript in the JS community, I would like to see CF add native support for it rather than run my own hack-y solution.

For now, we use either the tried-and-true copy / paste your distributable into the Workers console (😱) or the Worker API.

thanks @tills13

Agree, i also think cloudflare should add it natively. Either as a template which is configured to work with typescript or adding a cli parameter to wrangler to enable TypeScript support for any template

[EverlastingBugstopper]

Our next release will include this commit which allows you to specify a custom path to your webpack configuration: https://github.com/cloudflare/wrangler/commit/ba729f86ac21c5384021cbe02d41609d250944e6

Hold tight!