MJML webpack loader

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

Usage

Install the package as devDependency:

yarn add -D webpack-mjml-loader

Install MJML package as devDependency:

yarn add -D mjml

Update your webpack config:

// 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 !

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

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

Local Development

This project was bootstrapped with 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.