Nutella Peanut-Butter Marshmallow

    @djaler/esbuild-loader

    2.5.0 • Public • Published

    esbuild-loader

    Speed up your Webpack build with esbuild! 🔥

    esbuild is a JavaScript bundler written in Go that supports blazing fast ESNext & TypeScript transpilation and JS minification.

    esbuild-loader lets you harness the speed of esbuild in your Webpack build by offering faster alternatives for transpilation (eg. babel-loader/ts-loader) and minification (eg. Terser)!

    If you like this project, please star it & follow me to see what other cool projects I'm working on! ❤️

    🚀 Install

    npm i -D esbuild-loader

    🚦 Quick Setup

    Javascript transpilation (eg. Babel)

    In webpack.config.js:

    + const { ESBuildPlugin } = require('esbuild-loader')
    
      module.exports = {
        module: {
          rules: [
    -       {
    -         test: /\.js$/,
    -         use: 'babel-loader',
    -       },
    +       {
    +         test: /\.js$/,
    +         loader: 'esbuild-loader',
    +         options: {
    +           target: 'es2015' // Syntax to compile to (see options below for possible values)
    +         }
    +       },
    
            ...
          ],
        },
        plugins: [
    +     new ESBuildPlugin()
        ]
      }

    TypeScript & TSX

    In webpack.config.js:

    + const { ESBuildPlugin } = require('esbuild-loader')
    
      module.exports = {
        module: {
          rules: [
    -       {
    -         test: /\.tsx?$/,
    -         use: 'ts-loader'
    -       },
    +       {
    +         test: /\.tsx?$/,
    +         loader: 'esbuild-loader',
    +         options: {
    +           loader: 'tsx', // Or 'ts' if you don't need tsx
    +           target: 'es2015'
    +         }
    +       },
    
            ...
          ]
        },
        plugins: [
    +     new ESBuildPlugin()
        ]
      }

    Configuration

    If you have a tsconfig.json file, you can pass it in via the tsconfigRaw option. Note, esbuild only supports a subset of tsconfig options and does not do type checks.

      {
          test: /\.tsx?$/,
          loader: 'esbuild-loader',
          options: {
              loader: 'tsx',
              target: 'es2015',
    +         tsconfigRaw: require('./tsconfig.json')
          }
      }

    Minification (eg. Terser)

    You can replace JS minifiers like Terser or UglifyJs. Checkout the benchmarks to see how much faster esbuild is.

    In webpack.config.js:

    + const {
    +   ESBuildPlugin,
    +   ESBuildMinifyPlugin
    + } = require('esbuild-loader')
    
      module.exports = {
        ...,
    
    +   optimization: {
    +     minimize: true,
    +     minimizer: [
    +       new ESBuildMinifyPlugin({
    +         target: 'es2015' // Syntax to compile to (see options below for possible values)
    +       })
    +     ]
    +   },
    
        plugins: [
    +     new ESBuildPlugin()
        ]
      }

    💁‍♀️ Protip: Use the minify plugin in-place of the loader to transpile your JS

    The target option tells esbuild that it can use newer JS syntax to perform better minification. If you're not using TypeScript or any syntax unsupported by Webpack, you can also leverage this as a transpilation step. It will be faster because there's less files to work on and will produce a smaller output because the polyfills will only be bundled once for the entire build instead of per file.

    ⚙️ Options

    Loader

    The loader supports options from esbuild.

    • target <String> (es2015) - Environment target (e.g. es2016, 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.createElement
    • jsxFragment <String> - What to use instead of React.Fragment

    Enable source-maps via devtool

    MinifyPlugin

    • target <String> (esnext) - Environment target (e.g. es2016, chrome80, esnext)
    • minify <Boolean> (true) - Sets all minify flags
    • minifyWhitespace <Boolean> - Remove whitespace
    • minifyIdentifiers <Boolean> - Shorten identifiers
    • minifySyntax <Boolean> - Use equivalent but shorter syntax
    • sourcemap <Boolean> (defaults to Webpack devtool)- Whether to emit sourcemaps

    💼 License

    Install

    npm i @djaler/esbuild-loader

    DownloadsWeekly Downloads

    3

    Version

    2.5.0

    License

    MIT

    Unpacked Size

    12.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • djaler