1. transform-loader
transform loader for webpack
transform-loader
Package: transform-loader
Created by: webpack
Last modified: Mon, 27 Jun 2022 20:12:08 GMT
Version: 0.2.4
Downloads: 158,809
Repository: https://github.com/webpack/transform-loader

Install

npm install transform-loader
yarn add transform-loader

npm
deps
chat

Transform Loader

Use a browserify transforms as webpack-loader.

Install

 npm i transform-loader --save

Usage

Documentation: Using loaders

Pass the module name as query parameter.

 var x = require("!transform-loader?brfs!./file.js");
var x = require("!transform-loader/cacheable?brfs!./file.js"); // cacheable version

If you pass a number instead it will take the function from this.options.transforms[number].

Webpack 2.x Config Example

 module.exports = {
  module: {
    rules: [
      {
        loader: "transform-loader?brfs",
        enforce: "post"
      },
			{
        test: /\.coffee$/,
        loader: "transform-loader/cacheable?coffeeify"
      },
      {
        test: /\.weirdjs$/,
        loader: "transform-loader?0"
      }
    ]
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        transforms: [
          function(file) {
            return through(function(buf) {
              this.queue(buf.split("").map(function(s) {
                return String.fromCharCode(127-s.charCodeAt(0));
              }).join(""));
            }, function() { this.queue(null); });
          }
        ]
      }
    })
  ]
};

Webpack 1.x Config Example

 module.exports = {
	module: {
		postLoaders: [
			{
				loader: "transform-loader?brfs"
			}
		]
		loaders: [
			{
				test: /\.coffee$/,
				loader: "transform-loader/cacheable?coffeeify"
			},
			{
				test: /\.weirdjs$/,
				loader: "transform-loader?0"
			}
		]
	},
	transforms: [
		function(file) {
			return through(function(buf) {
				this.queue(buf.split("").map(function(s) {
					return String.fromCharCode(127-s.charCodeAt(0));
				}).join(""));
			}, function() { this.queue(null); });
		}
	]
};

Typical brfs Example

Say you have the following Node source:

 var test = require('fs').readFileSync('./test.txt', 'utf8');

After npm install transform-loader brfs --save, add the following loader to your config:

 module.exports = {
    context: __dirname,
    entry: "./index.js",
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: "transform-loader?brfs"
            }
        ]
    }
}

The loader is applied to all JS files, which can incur a performance hit with watch tasks. So you may want to use transform-loader/cacheable?brfs instead.

Maintainers


Juho Vepsäläinen

Joshua Wiens

Kees Kluskens

Sean Larkin

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code