Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/freshollie/esbuild-plugin-webpack-bridge
Allows to use webpack loaders with esbuild
https://github.com/freshollie/esbuild-plugin-webpack-bridge
Last synced: 3 days ago
JSON representation
Allows to use webpack loaders with esbuild
- Host: GitHub
- URL: https://github.com/freshollie/esbuild-plugin-webpack-bridge
- Owner: freshollie
- License: mit
- Created: 2021-11-06T16:59:06.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2021-04-07T13:20:54.000Z (almost 4 years ago)
- Last Synced: 2024-11-11T19:43:11.577Z (2 months ago)
- Homepage:
- Size: 691 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# esbuild-plugin-webpack-bridge
A plugin that allows to use webpack loaders with [esbuild](https://github.com/evanw/esbuild).
## Rationale
Current set of plugins for esbuild is not enough for production development,
but webpack's community already has everything that developers may want to. So why not use it?
## Installation
```sh
npm install --save-dev esbuild-plugin-webpack-bridge
```
## Usage
Define plugin in the `plugins` section of esbuild config like this:
```js
const path = require('path');
const esbuild = require('esbuild');
const webpackBridge = require('esbuild-plugin-webpack-bridge');
esbuild.build({
// ...
plugins: [
webpackBridge({
// output.path is used by file-loader and others, so it's required
output: {
path: path.resolve(__dirname, 'public'),
},
// resolve.modules should be set then the same option was used in webpack config
// e.g. when your project was set up for path relative to the some non-root folder
resolve: {
modules: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')],
},
module: {
rules: [
{
// only regexps are supported by now
test: /\.js$/,
// required option that sets final loader on the esbuild side that will be used
// read more about esbuild loaders:
// https://esbuild.github.io/content-types/
esbuildLoader: 'js',
// `use` or `loader` might be used here
use: [
{
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', { targets: { ie: 11 } }],
],
},
},
],
},
{
test: /\.scss$/,
esbuildLoader: 'css',
use: [
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
},
},
],
},
],
},
}),
],
})
```
## Important notes
The plugin is currently under development, so the API may change during the time. Also there're not
so many loaders' features supported, see the list below.
Only the latest major version of each loader is tested, which, most of the time, means that it should work with webpack@4
and sometimes with webpack@5.
Check [test/](test) folder for more examples.
## List of tested loaders
Probably works correctly:
- [babel-loader](https://github.com/babel/babel-loader)
- [null-loader](https://github.com/webpack-contrib/null-loader)
- [postcss-loader](https://github.com/webpack-contrib/postcss-loader)
- [resolve-url-loader](https://github.com/bholloway/resolve-url-loader)
- [sass-loader](https://github.com/webpack-contrib/sass-loader)
## List of loaders that won't be supported
- [file-loader](https://github.com/webpack-contrib/file-loader). Because currently esbuild does not have an API
that allows to tell the bundler where the loaded file is placed by the loader.
## Contributing
The plugin is under development, so any PR is highly welcomed. But if you're going to implement something that
changes current API or may take a lot of your time to develop, please, open an issue first.
Just to notify me about your intentions.