# parcelify-loader

> parcelify-like loader module for webpack 2

Latest version **2.0.0** (published 2017-03-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install parcelify-loader
pnpm add parcelify-loader
yarn add parcelify-loader
bun add parcelify-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2017-03-17 |
| First published | 2016-10-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Gerfried Aigner @g-aigner |
| Maintainers | g-aigner |

## Links

- npm: https://www.npmjs.com/package/parcelify-loader
- Repository: https://github.com/g-aigner/parcelify-loader
- Issues: https://github.com/g-aigner/parcelify-loader/issues
- npm.io page: https://npm.io/package/parcelify-loader

## Dependencies (1)

- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0

## Recent versions

- 2.0.0 (latest) — 2017-03-17
- 0.1.1 — 2016-10-12
- 0.1.0 — 2016-10-12

## README

# parcelify-loader

A simple [webpack](https://github.com/webpack/webpack) loader that mimics
the function of [parcelify](https://github.com/rotundasoftware/parcelify).

## tl;dr

```
$ npm install --save-dev parcelify-loader
```
[Documentation: using loaders](https://webpack.js.org/concepts/loaders/)

## Why is this necessary?

Some [browserify](http://browserify.org/)-based projects are relying on 
[parcelify](https://github.com/rotundasoftware/parcelify) to bundle necessary 
module stylesheets by reading values from an additional `style` property in the 
component's `package.json` file. Webpack relies on CommonJS import/require 
syntax, so it does not read bundling information from a package file.

## How does this work?

The loader reads from `package.json`, parses the `style` attribute and adds a 
virtual `require()` for the stylesheet to the in-mem version of the loaded 
javascript file.

## Configuration

You will need to configure `parcelify-loader` for the javascript source files 
in your `webpack.config.js`.

**Note**: you will also need an appropriate stylesheet loader, read more about 
it [here](https://webpack.js.org/loaders/css-loader/).

### parcelify-loader

Apply `parcelify-loader` to the desired filetypes (enforcing `pre` to run before
all other transformations):

```javascript
module: {
  rules: [
    {
      test: /\.js$/,
      enforce: "pre",
      use: [ "parcelify-loader" ],
      include: [
        path.resolve("./src"),
        path.resolve("./node_modules/your-browserify-components") // e.g.
      ]
    }
  ]
}       
```
Make sure you include your compoment's source directory in `include`; otherwise, 
native styles for components will not be included.

(*Optional*) Configure `parcelify-loader` with project specific settings:

```javascript
module: {
  rules: [
    {
      ...
      use: [
        loader: "parcelify-loader",
        options: {
          json: "component.json"
        }
      ]
    }
  ]
}
```

## parcelify-loader API

The following settings can be configured for `parcelify-loader`:

* `json` - the filename of your component's json file. Default:
```javascript
options: {
  json: "package.json"
}
``` 
* `encoding` - the encoding of your component's json file. See 
[list of encodings](https://github.com/nodejs/node/blob/master/lib/buffer.js) 
for supported encodings. Default:
```javascript
options: {
  encoding: "utf8"
}
``` 
* `require` - the statement to wrap the required style file in. Note that 
this setting **must** have a `$1` parameter to work. Default:
```javascript
options: {
  require: "require($1)"
}
```
* `lineBreakSeq` - the character sequence to render after `require`. Typically,
you will not need anything but the linebreak. Default:
```javascript
options: {
  lineBreakSeq: "\n"
}
```

## Support for webpack 1

[Version 1.0.0](https://github.com/g-aigner/parcelify-loader/releases/tag/1.0.0) of `parcelify-loader` supports webpack 1.14.0.

---
_Source: https://npm.io/package/parcelify-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._