https://github.com/blitzbanana/webpack-mjml-loader

Mjml 4 Webpack 5 / 4 loader
https://github.com/blitzbanana/webpack-mjml-loader

mjml mjml4 webpack webpack-loader

Last synced: 13 days ago
JSON representation

Mjml 4 Webpack 5 / 4 loader

• Host: GitHub
• URL: https://github.com/blitzbanana/webpack-mjml-loader
• Owner: BlitzBanana
• License: mit
• Created: 2019-10-17T11:50:09.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-02-03T02:59:59.000Z (almost 2 years ago)
• Last Synced: 2024-04-26T14:41:48.330Z (8 months ago)
• Topics: mjml, mjml4, webpack, webpack-loader
• Language: TypeScript
• Homepage:
• Size: 2.06 MB
• Stars: 9
• Watchers: 1
• Forks: 1
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# MJML webpack loader

[![npm](https://badgen.net/npm/v/webpack-mjml-loader)](https://www.npmjs.com/package/webpack-mjml-loader)

[![npm](https://badgen.net/npm/dm/webpack-mjml-loader)](https://www.npmjs.com/package/webpack-mjml-loader)

[![GitHub Actions](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2FBlitzBanana%2Fwebpack-mjml-loader%2Fbadge&label=build&logo=none)](https://actions-badge.atrox.dev/BlitzBanana/webpack-mjml-loader/goto)

This webpack loader transforms your MJML files into html strings to be imported in nodejs. MJML is linked as peer dependency so you can use the version that you want.

> This is for webpack 5, for webpack 4 see [v1.1.0](https://github.com/BlitzBanana/webpack-mjml-loader/tree/v1.1.0)

## Usage

Install the package as devDependency:

```sh

yarn add -D webpack-mjml-loader

```

Install MJML package as devDependency:

```sh

yarn add -D mjml

```

Update your webpack config:

```js

// webpack.config.js

module.exports = {

  // [...] The rest of your webpack config

  module: {

    rules: [

      // [...] Your other rules like babel-loader

      {

        test: /\.mjml$/,

        use: [

          {

            loader: 'webpack-mjml-loader',

            // optional, you can omit options

            options: {

              // any mjml option, see: https://github.com/mjmlio/mjml#inside-nodejs

              // minify: true // Deprecated by mjml, will be removed from mjml 5.0

            }

          }

        ]

      }

    ]

  }

}

```

Enjoy !

```js

import { default as foobarTemplate } from './foobar.mjml'

sendEmail(foobarTemplate, { /* my options */ })

```

## Local Development

> This project was bootstrapped with [TSDX](https://github.com/jaredpalmer/tsdx).

Below is a list of commands you will probably find useful.

### `yarn start`

Runs the project in development/watch mode. Your project will be rebuilt upon changes. TSDX has a special logger for you convenience. Error messages are pretty printed and formatted for compatibility VS Code's Problems tab.

### `yarn build`

Bundles the package to the `dist` folder.

The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).

### `yarn test`

Runs the test watcher (Jest) in an interactive mode.

By default, runs tests related to files changed since the last commit.