refactor webpack loaders (#49535)
### What?
* allow to apply existing pipeline
* change webpack loader key to glob for more flexibility
* add test cases
* add special error message when using the old config syntax
Old config:
```js
experimental: {
turbo: {
loaders: {
".mdx": ["mdx-loader"]
}
}
}
```
New config
``` js
experimental: {
turbo: {
rules: {
// key is a glob now
// normal syntax will treat the result as ecmascript code
"*.mdx": ["mdx-loader"],
// glob allows more advanced matching
"./images/**/*.png": {
loaders: ["image-optimize-loader"],
// result of loader will be handled in other steps
// under the same name/path (here .png)
// This will use the existing .png pipeline (static asset)
// It might also use other rules matching .png.
as: "*"
},
"*.generate-image.js": {
loaders: ["image-generation-loader"],
// It also possible to pass this under a different name
// into the pipeline. Here it will treat the result as png image
as: "*.png"
}
}
}
}
```
### Why?
More flexibility and allowing to use the builtin module handling over
non-js types.
fixes WEB-1009
### Turbopack changes
* https://github.com/vercel/turbo/pull/4955 <!-- OJ Kwon -
refactor(turbopack-ecmascript): deprecate enable_emotion, enable_styled*
-->
* https://github.com/vercel/turbo/pull/4880 <!-- Tobias Koppers -
refactor webpack loader execution -->
---------
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
