https://github.com/fansenze/parcel-transformer-url-loader

📦url loader for parcel, use base64 encode file
https://github.com/fansenze/parcel-transformer-url-loader

base64 parcel parcel-plugin url-loader

Last synced: 2 months ago
JSON representation

📦url loader for parcel, use base64 encode file

• Host: GitHub
• URL: https://github.com/fansenze/parcel-transformer-url-loader
• Owner: fansenze
• License: mit
• Created: 2017-12-22T07:50:05.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-08-19T12:20:09.000Z (over 2 years ago)
• Last Synced: 2024-10-10T03:33:35.335Z (3 months ago)
• Topics: base64, parcel, parcel-plugin, url-loader
• Language: JavaScript
• Homepage:
• Size: 271 KB
• Stars: 24
• Watchers: 2
• Forks: 11
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-parcel - Url-Loader - Plugin that enables convert image to base64 in `js`/`css`. (Plugins / Other)

README

        
# parcel-transformer-url-loader

**use `base64` encode file in `js` and `css`(includes `sass`/`less` etc.)**

the plugin will unlink file in `production`(parcel env).

## Installation

> if you use **Parcel 1.x**, you should install `[email protected]`.

### npm

```bash

npm i parcel-transformer-url-loader -D

```

### yarn

```bash

yarn add parcel-transformer-url-loader --dev

```

## Usage

### define transformers for parcel

you must define glob in `.parcelrc` to match files for the transformer of `parcel-transformer-url-loader`.

for example:

```json

// .parcelrc

{

  "extends": "@parcel/config-default",

  "transformers": {

    "*.{png,jpg,jpeg}": ["parcel-transformer-url-loader"]

  }

}

```

### Configuration

✨✨✨ If you have used `url-loader` in `webpack`, you'll feel familiar with it.

#### there is default options in package.json

```json

{

  "parcel-transformer-url-loader": {

    "limit": 10240

  }

}

```

#### if you want to have your configuration

you can define "parcel-transformer-url-loader" in you `package.json`.

for example:

```json

{

  "name": "your project",

  "scripts": {},

  "parcel-transformer-url-loader": {

    "limit": 8888

  }

}

```