Using with Webpack

Updated on August 22, 2024

Baleada Source Transform's Webpack loader can be imported from @baleada/source-transform/webpack, but you won't often need to import it yourself. Usually you'll just specify it as the loader property of a Webpack rule, like so:

//webpack.config.js
const myTransformFunction = require('path/to/myTransformFunction')

module.exports = {
  //...
  module: {
    rules: [
      //...
      {
        test: /\.js$/, // Replace `js` with any file extension
        loader: '@baleada/source-transform/webpack',
        options: { transform: myTransformFunction }
      }
    ]
  }
}

Here's a full breakdown of the options object for the Webpack loader:

context and utils in the transform function's first argument

As mentioned in the Baleada Source Transform overview, your transform function's only parameter is an object that includes various properties. Two of these properties—context and utils—have specific values when used with Webpack.

When using Baleada Source Transform with Webpack:

• context is the loader context.
• utils contains all of the functions from the loader-utils package, plus the validate function from the schema-utils package.

transform function return value

In most cases, you'll probably return a String from your transform function, but to learn more about what else you can return, visit the Webpack docs.

Edit doc on GitHub