esbuild is by far one of the fastest TS/ESNext to ES6 compilers, so it makes sense to use it over Babel/TSC with webpack to take advantage of both worlds (Speed and the webpack ecosytem).
You might also like maho, a React framework powered by esbuild.
yarn add esbuild-loader --dev
In webpack.config.js
:
const { ESBuildPlugin } = require('esbuild-loader')
module.exports = {
module: {
rules: [
{
test: /\.[jt]sx?$/,
loader: 'esbuild-loader',
options: {
target: 'es2015', // default, or 'es20XX', 'esnext'
},
},
{
test: /\.tsx$/,
loader: 'esbuild-loader',
options: {
loader: 'tsx',
target: 'es2015',
},
},
],
},
plugins: [
new ESBuildPlugin()
]
}
In webpack.config.js
:
const { ESBuildPlugin, ESBuildMinifyPlugin } = require('esbuild-loader')
module.exports = {
optimization: {
minimize: true,
minimizer: [
new ESBuildMinifyPlugin()
],
},
plugins: [
new ESBuildPlugin()
],
}
The loader supports options from esbuild.
target
<String>
(es2015
) - Environment target (e.g. es2017, chrome80, esnext)loader
<String>
(js
) - Which loader to use to handle file. Possible values:js, jsx, ts, tsx, json, text, base64, file, dataurl, binary
jsxFactory
<String>
- What to use instead of React.createElementjsxFragment
<String>
- What to use instead of React.Fragment- Enable source-maps via
devtool
minify
<Boolean>
(true
) - Sets all--minify-*
flagsminifyWhitespace
<Boolean>
- Remove whitespaceminifyIdentifiers
<Boolean>
- Shorten identifiersminifySyntax
<Boolean>
- Use equivalent but shorter syntaxsourcemap
<Boolean>
(defaults to Webpackdevtool
)- Whether to emit sourcemaps
MIT © EGOIST (Kevin Titor)