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

Readme

Source

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"
                        }
                    }
                }
            }
        }
    ];
}

Configuration Reference

Refer https://swc.rs/docs/configuring-swc

FAQs

What is swc-loader?

Is swc-loader popular?

Is swc-loader well maintained?

Package last updated on 05 Feb 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install