How to run Babel plugin after building with webpack/esbuild-loader?

Question

I reduced HMR build time by roughly tenfold after swapping babel-loader to esbuild-loader in our Webpack React project. The problem: I haven't figured out how to replace the babel-plugin-styled-components ie how to add styled-components names as class names to dom elements for better development experience.

Would it be possible to build with esbuild and then somehow run the mentioned Babel plugin?

Thanks in advance!

score 3 · Accepted Answer · answered Oct 21 '22 at 17:06

Solved the problem like this: in Webpack config file first transpile *.js files (javascript/react) with esbuild and after that run the transpiled javascript through babel-loader to invoke the plugin I wanted to use.
This solution increased build time slightly but it was still almost 10 times faster than transpiling everything with Babel.

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'esbuild-loader',
  options: {
    loader: 'jsx',
    target: 'es2015',
  },
},
{
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: /node_modules/,
  options: {
    plugins: ['babel-plugin-styled-components'],
  },
 }

How to run Babel plugin after building with webpack/esbuild-loader?

1 Answers1