swc-loader

What is swc-loader?

The swc-loader package is a webpack loader for the SWC compiler, which allows for super-fast transpilation of JavaScript and TypeScript code. It leverages the speed of SWC to offer quick build times for development and production environments. This loader integrates seamlessly with webpack, enabling developers to use SWC's powerful features directly within their webpack configuration.

What are swc-loader's main functionalities?

Transpilation of JavaScript/TypeScript

This code sample demonstrates how to configure swc-loader in a webpack configuration file to transpile JavaScript files. It specifies the use of the SWC compiler with certain options, such as parsing JSX syntax and targeting ES2015 for the output.

module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'ecmascript',
                jsx: true
              },
              target: 'es2015'
            }
          }
        }
      }
    ]
  }
};

Source Maps

This configuration enables source map generation for debugging purposes. When set to true, the 'sourceMaps' option tells swc-loader to produce source maps alongside the transpiled code, making it easier to debug in development environments.

module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        use: {
          loader: 'swc-loader',
          options: {
            sourceMaps: true
          }
        }
      }
    ]
  }
};

Other packages similar to swc-loader

babel-loader

babel-loader is a webpack plugin that uses Babel to transpile JavaScript. It is similar to swc-loader in functionality but tends to be slower because Babel performs transformations in JavaScript, whereas SWC is written in Rust, offering faster build times.

ts-loader

ts-loader is a TypeScript loader for webpack. It is designed specifically for TypeScript, similar to how swc-loader can handle TypeScript files. However, swc-loader might offer faster compilation times due to its efficient Rust-based compilation engine.

esbuild-loader

esbuild-loader integrates esbuild into webpack, offering extremely fast bundling and transpilation. Like swc-loader, it focuses on speed and efficiency, leveraging the performance of Go (in the case of esbuild) versus Rust (for SWC), making them both strong alternatives to traditional JavaScript-based tools.

README

swc-loader

This package allows transpiling JavaScript files using swc and webpack.

Installation

npm i --save-dev @swc/core swc-loader webpack

Usage

module: {
    rules: [
        {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                // Use `.swcrc` to configure swc
                loader: "swc-loader"
            }
        }
    ];
}

You can pass options to the loader by using the option property.

module: {
    rules: [
        {
            test: /\.ts$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: "swc-loader",
                options: {
                    jsc: {
                        parser: {
                            syntax: "typescript"
                        }
                    }
                }
            }
        }
    ];
}

If you get an error while using swc-loader, you can pass sync: true to get correct error message.

module: {
    rules: [
        {
            test: /\.ts$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: "swc-loader",
                options: {
                    // This makes swc-loader invoke swc synchronously.
                    sync: true,
                    jsc: {
                        parser: {
                            syntax: "typescript"
                        }
                    }
                }
            }
        }
    ];
}