Clarify how to compile MJML to output file in README

fredrivett commented 6 years ago

I'm new to webpack and have spent about 3-4 hours trying to work out how to take an .mjml file, process it with mjml-loader and output the contents as a new file into a directory.

I've played around with file-loader, raw-loader and extract-text-webpack-plugin but none do what I'm after.

I manage to console log the output nicely, but I want to output the file to save as a new file, not see it in my console.

The closest I've got is from this setup:

rules: [
   {
      test: /\.mjml$/,
      use: ['file-loader', 'mjml-loader'],
   }

Template:

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-text>Hello World!</mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

and app.js:

const mjml = require('./../mjml/template.mjml');
console.log(mjml);

Which outputs this as a new file:

module.exports = "<!doctype html>\n<html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\">\n<head>\n  <title></title>\n  <!--[if !mso]><!-- -->\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <!--<![endif]-->\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<style type=\"text/css\">\n  #outlook a { padding: 0; }\n  .ReadMsgBody { width: 100%; }\n  .ExternalClass { width: 100%; }\n  .ExternalClass * { line-height:100%; }\n  body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }\n  table, td { border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }\n  img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }\n  p { display: block; margin: 13px 0; }\n</style>\n<!--[if !mso]><!-->\n<style type=\"text/css\">\n  @media only screen and (max-width:480px) {\n    @-ms-viewport { width:320px; }\n    @viewport { width:320px; }\n  }\n</style>\n<!--<![endif]-->\n<!--[if mso]>\n<xml>\n  <o:OfficeDocumentSettings>\n    <o:AllowPNG/>\n    <o:PixelsPerInch>96</o:PixelsPerInch>\n  </o:OfficeDocumentSettings>\n</xml>\n<![endif]-->\n<!--[if lte mso 11]>\n<style type=\"text/css\">\n  .outlook-group-fix {\n    width:100% !important;\n  }\n</style>\n<![endif]-->\n\n<!--[if !mso]><!-->\n    <link href=\"https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700\" rel=\"stylesheet\" type=\"text/css\">\n    <style type=\"text/css\">\n\n        @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);\n\n    </style>\n  <!--<![endif]--><style type=\"text/css\">\n  @media only screen and (min-width:480px) {\n    .mj-column-per-100 { width:100%!important; }\n  }\n</style>\n</head>\n<body>\n  \n  <div class=\"mj-container\"><!--[if mso | IE]>\n      <table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"600\" align=\"center\" style=\"width:600px;\">\n        <tr>\n          <td style=\"line-height:0px;font-size:0px;mso-line-height-rule:exactly;\">\n      <![endif]--><div style=\"margin:0px auto;max-width:600px;\"><table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" style=\"font-size:0px;width:100%;\" align=\"center\" border=\"0\"><tbody><tr><td style=\"text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;\"><!--[if mso | IE]>\n      <table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n        <tr>\n          <td style=\"vertical-align:top;width:600px;\">\n      <![endif]--><div class=\"mj-column-per-100 outlook-group-fix\" style=\"vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;\"><table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" border=\"0\"><tbody><tr><td style=\"word-wrap:break-word;font-size:0px;padding:10px 25px;\" align=\"left\"><div style=\"cursor:auto;color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;\">Hello World!</div></td></tr></tbody></table></div><!--[if mso | IE]>\n      </td></tr></table>\n      <![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>\n      </td></tr></table>\n      <![endif]--></div>\n</body>\n</html>";

I'm really not sure what I'm doing wrong here or how this should setup to work. This isn't really an issue with this repo, but I've spent a long time scratching my head on this already and as it seems like the most common setup people will use this loader for, I thought I'd ask here in case it can be clarified either simply to me here or with an update to the README to stop others scratching their heads for so long too.

Appreciate any help you can offer.

ramasilveyra commented 6 years ago

Maybe for your use case is better to use mjml cli or gulp-mjml, since you only need to compile MJML files to HTML, no webpack features needed.

fredrivett commented 6 years ago

Hey Ramiro, thanks for the reply as I know this is out of scope of issues.

Yeah you may well be right. I'm new to MJML and my first thought was to use webpack because I'm already using it, but it might not be needed. I assumed mjml-loader was primarily for compiling .mjml templates into email ready .html code but may have misunderstood there.

Appreciate you taking the time to respond here 🙌

ramasilveyra / mjml-loader

Clarify how to compile MJML to output file in README #4