Multiple target builds

[hornta]

🚀 Feature request

I want the possibility to build multiple bundles so that I can individually target specific browsers. At work we are using 2 different browserslist queries to build two different bundles, one for modern browsers supporting newer syntax (es6+) and one for everything else, in our case to target IE11.

We are doing this so that we can ship less and faster code to modern browsers. They shouldn't be held back because of non-modern browsers. Then our web framework will serve a bundle depending on the user agent string.

Is this possible to do with the current state of Razzle? If not, can someone with a bit more knowledge of razzle point me in the right direction to whats missing so that I can hopefully get a PR up and running?

[fivethreeo]

It is not possible in the current state of razzle. You could look at making a webpack plugin like next.js has

https://github.com/vercel/next.js/blob/c2f38f2af043a24220171d109f3b6a00b52e2089/packages/next/build/webpack/plugins/next-esm-plugin.ts

https://github.com/vercel/next.js/blob/7c7ecaa6369690987876f3fc61479b8331f5bbb5/packages/next/build/webpack-config.ts#L1040

[fivethreeo]

Maybe just copy that and build it with tsdx https://tsdx.io/ or port it to es6. It should work with the new razzle coming soon :)

[fivethreeo]

https://github.com/jaredpalmer/razzle/issues/1377

[fivethreeo]

I had another idea for this. But that will have to be a new feature in razzle after 4.0. The idea is to be able to supply razzle with a list of build names in razzle.config.js Then have razzle build iterate over those names then get configuration with that build name supplied to modifyWebpackConfig so each build can modify the webpack config any way it wants. Then it builds each build and puts it in build/[buildname]/. Look in packages/razzle/scripts/build.js in the next-awesome branch.

[hornta]

That sounds good. In development mode you most certainly dont want to have any more than 1 build at a time but it shouöd be configurable to start the dev server against any target.

[agairing]

I would also love this feature :-)

[fivethreeo]

WIP

https://github.com/jaredpalmer/razzle/blob/alpha/packages/razzle-plugin-webpack5/src/index.ts#L17

https://github.com/jaredpalmer/razzle/blob/alpha/packages/razzle-plugin-webpack5/src/createConfig.ts#L41