Webpack email template

webpack-email-template

A simple webpack project to start creating an email template.

NPM Commands

Launch a web server for development:

npm run serve

Build a project:

npm run build

Build a project for production:

npm run production

Basic project structure

• src
  • components
    • paragraph.html
  • index.html
  • index.js
• .gitignore
• LICENSE
• package-lock.json
• package.json
• README.md
• webpack.config.js

Brief description

In index.html you can insert the layout of your email.

The components directory contains html files that can describe individual blocks, such as an email header, a text block, a product block, and so on.

To insert a block in index.html you must call the block using the lodash syntax:

<%=_.template(require(‘./link/to/your/component.html’).default)(data)%>

The template method takes a string with an html template as a parameter. In our case, we get the template using the require method.

data – any JavaScript object with a set of data that we can use inside the html template which we called.

You can read more about the template method and the lodash template engine here.

Plugins

• base64-inline-loader - if you need to integrate images directly into html as a base64 string.