Awesome
<div align="center"> <a href="https://github.com/webpack/webpack"> <img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg"> </a> </div>transform-loader
A browserify transformation loader for webpack.
This loader allows use of browserify transforms via a webpack loader.
Getting Started
To begin, you'll need to install transform-loader
:
$ npm install transform-loader --save-dev
Note: We're using the coffeeify tranform for these examples.
Then invoke the loader through a require like so:
const thing = require('!transform-loader?coffeeify!widget/thing');
Or add the loader to your webpack
config. For example:
// entry.js
import thing from 'widget/thing';
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.coffee?$/,
loader: `transform-loader?coffeeify`,
// options: {...}
},
],
},
};
And run webpack
via your preferred method.
QueryString Options
When using the loader via a require
query string you may specify one of two
types; a loader name, or a function index.
<loder-name>
Type: String
The name of the browserify
transform you wish to use.
Note: You must install the correct transform manually. Webpack nor this loader will do that for you.
<loder-index>
Type: Number
The index of a function contained within options.transforms
which to use to
transform the target file(s).
Options
transforms
Type: Array[Function]
Default: undefined
An array of functions
that can be used to transform a given file matching the
configured loader test
. For example:
// entry.js
const thing = require('widget/thing');
// webpack.config.js
const through = require('through2');
module.exports = {
module: {
rules: [
{
test: /\.ext$/,
// NOTE: we've specified an index of 0, which will use the `transform`
// function in `transforms` below.
loader: 'transform-loader?0',
options: {
transforms: [
function transform() {
return through(
(buffer) => {
const result = buffer
.split('')
.map((chunk) =>
String.fromCharCode(127 - chunk.charCodeAt(0))
);
return this.queue(result).join('');
},
() => this.queue(null)
);
},
],
},
},
],
},
};
Contributing
Please take a moment to read our contributing guidelines if you haven't yet done so.