# marko-loader

> A marko template loader for webpack

Latest version **1.5.0** (published 2019-02-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install marko-loader
pnpm add marko-loader
yarn add marko-loader
bun add marko-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 | 1.5.0 |
| Published | 2019-02-21 |
| First published | 2016-09-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 14.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Patrick Steele-Idem |
| Maintainers | austinkelleher, dylanpiercey, mlrawlings, pnidem |
| Keywords | webpack, loader, marko |

## Links

- npm: https://www.npmjs.com/package/marko-loader
- Repository: https://github.com/marko-js/marko-loader
- Homepage: https://github.com/marko-js/marko-loader#readme
- Issues: https://github.com/marko-js/marko-loader/issues
- npm.io page: https://npm.io/package/marko-loader

## Dependencies (1)

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

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.5.0 (latest) — 2019-02-21
- 1.4.0 — 2019-02-21
- 1.3.3 — 2018-04-12
- 1.3.2 — 2017-11-16
- 1.3.1 — 2017-04-24
- 1.3.0 — 2017-03-02
- 1.2.0 — 2017-01-19
- 1.1.1 — 2017-01-07
- 1.1.0 — 2016-12-29
- 1.0.0 — 2016-09-13

## README

marko-loader
============

A [marko](http://markojs.com/) template loader for [webpack](https://github.com/webpack/webpack).

## Installation

Install required packages:

```bash
npm install marko --save
npm install marko-loader --save-dev
```

And then register the marko loader in your webpack configuration file:

_webpack.config.js:_

```javascript
module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.marko$/,
            loader: "marko-loader"
        }]
    }
};
```

## Usage

With this loader installed, you can then require `./template.marko` files as shown below:

_./template.marko:_

```xml
<div>
    <h1>Hello ${data.name}!</h1>
</div>
```

_./index.js:_

```javascript
var template = require('./template.marko')
var html = template.renderToString({ name: 'Frank' });
```

### Compilation target

`marko-loader` will automatically detect your webpack target and output the appropriately compiled Marko code.
If you wish to override this behaviour simply add the `target` field in the options for this loader.

### Hydrate & dependencies for server-rendered pages

When rendering a Marko template serverside, only components that can re-render need their full template in the browser.
This loader supports only loading the needed parts to hydrate with two options:

- `?dependencies` includes only the dependencies that are needed in the browser (css, dynamic components)
- `?hydrate` includes these dependencies and also kicks off hydration & component initialization

_webpack.config.js:_
```js
module.exports = {
    entry: "./path/to/page.marko?hydrate",
    /* ... */
}
```

## Additional resources

- Sample app: [marko-webpack](https://github.com/marko-js-samples/marko-webpack)

## License

MIT

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