{"id":16738079,"url":"https://github.com/dc7290/template-ejs-loader","last_synced_at":"2025-08-03T14:34:10.103Z","repository":{"id":37262314,"uuid":"369251527","full_name":"dc7290/template-ejs-loader","owner":"dc7290","description":"ejs-loader with webpack5 support. Chain it to html-loader and use it with html-webpack-plugin.","archived":false,"fork":false,"pushed_at":"2023-07-19T02:41:27.000Z","size":1628,"stargazers_count":25,"open_issues_count":7,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-07T14:08:11.892Z","etag":null,"topics":["javascript","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dc7290.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-20T15:16:31.000Z","updated_at":"2024-12-23T11:57:47.000Z","dependencies_parsed_at":"2024-06-18T20:11:47.577Z","dependency_job_id":null,"html_url":"https://github.com/dc7290/template-ejs-loader","commit_stats":{"total_commits":93,"total_committers":6,"mean_commits":15.5,"dds":0.5053763440860215,"last_synced_commit":"855fb9db8598a170406306d13d2fcb720c120ffb"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dc7290%2Ftemplate-ejs-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dc7290%2Ftemplate-ejs-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dc7290%2Ftemplate-ejs-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dc7290%2Ftemplate-ejs-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dc7290","download_url":"https://codeload.github.com/dc7290/template-ejs-loader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243836015,"owners_count":20355615,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","webpack"],"created_at":"2024-10-13T00:29:10.208Z","updated_at":"2025-03-17T01:31:58.250Z","avatar_url":"https://github.com/dc7290.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# template-ejs-loader\n\n[![npm](https://img.shields.io/npm/v/template-ejs-loader.svg)](https://www.npmjs.com/package/template-ejs-loader)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/dc7290/template-ejs-loader/blob/main/LICENSE)\n\n[日本語](https://github.com/dc7290/template-ejs-loader/blob/main/docs/README-ja.md)\n\n[EJS](http://www.embeddedjs.com/) (Embeded JavaScript) loader for [Webpack](http://webpack.js.org). It converts EJS templates to plain HTML using the [EJS npm package](https://www.npmjs.com/package/ejs).\n\n- [features](#features)\n- [installation](#installation)\n- [usage](#usage)\n- [importing partials](#importing-partials)\n- [importing js/json files](#importing-files)\n- [Importing node modules](#importing-modules)\n- [Passing individual values](#passing-individual-values)\n- [more info](#more-info)\n\n## \u003ca name=\"features\"\u003e\u003c/a\u003eFeatures\n\n- webpack5 support\n- Import `.js`,`.json` and `node modules` using `require`\n- All files can be passed values.\n\n## \u003ca name=\"installation\"\u003e\u003c/a\u003e Instalation\n\n```bash\nnpm i -D template-ejs-loader\n```\n\n## \u003ca name=\"usage\"\u003e\u003c/a\u003e Usage\n\n**NOTE:** You need to chain the template-ejs-loader with an html loader such as the [html-loader](https://www.npmjs.com/package/html-loader) and use a template plugin such as the [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin). To install these run `npm i -D html-loader html-webpack-plugin`.\n\nInside your `webpack config file` add the fallowing rules\n\n```js\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\n\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.ejs$/i,\n        use: ['html-loader', 'template-ejs-loader'],\n      },\n    ],\n  },\n  plugins: [\n    new HtmlWebpackPlugin({\n      filename: 'index.html',\n      template: './src/ejs/index.ejs',\n    }),\n  ],\n  // ...\n}\n```\n\n## Options\n\nYou can set the values supported by ejs.\nSee [here](https://www.npmjs.com/package/ejs#options) for the values.\n\nThe following are your own configuration options.\n| Name | Type | Default | Description |\n| :-----------------------: | :--------: | :-----: | :-------------------------------- |\n| **[`data`](#data)** | `{Object}` | `{}` | |\n\n### `data`\n\nType: `Object`\nDefault: `{}`\n\nUse this if you want to pass the same value to all ejs files.\nIf you want to pass individual values, see [here](#passing-individual-values).\n\n## \u003ca name=\"importing-partials\"\u003e\u003c/a\u003e Importing partials\n\n```html\n\u003c!-- plain import --\u003e\n\u003c%- include('components/footer.ejs') %\u003e\n\n\u003c!-- appending data --\u003e\n\u003c%- include('components/header.ejs', { title: 'TOP' }) %\u003e\n```\n\n_Example:_\n\n`index.ejs`\n\n```html\n\u003c%- include('/components/header.ejs', { title: 'TOP' }) %\u003e\n\n\u003c%- include('/components/footer.ejs') %\u003e\n```\n\n`header.ejs`\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003e\u003c%= title %\u003e\u003c/title\u003e\n  \u003c/head\u003e\n\n  \u003cbody\u003e\n```\n\n`footer.ejs`\n\n```html\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n**Note:** Include preprocessor directives (\u003c% include user/show %\u003e) are not supported in ejs v3.0+.\n\n## \u003ca name=\"importing-files\"\u003e\u003c/a\u003e Importing JavaScript or JSON files\n\n`index.ejs`\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003c% const meta = require('../data/index-meta.js') %\u003e\n    \u003c%- include('components/header.ejs', meta) %\u003e\n  \u003c/head\u003e\n  \u003c!-- ... --\u003e\n\u003c/html\u003e\n```\n\n`index-meta.js`\n\n```js\nmodule.exports = {\n  title: 'Webpack Starter App',\n  author: 'John Doe',\n  keywords: ['lorem', 'ipsum', 'dolor', 'sit', 'amet'],\n  description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit.',\n  customFunction: function () {\n    // ...\n  },\n}\n```\n\n## \u003ca name=\"importing-modules\"\u003e\u003c/a\u003e Importing node modules\n\n`index.ejs`\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003c!-- ... --\u003e\n\n  \u003cdiv\u003e\n    \u003c% const _ = require('lodash') %\u003e\n    \u003c%= _.join(['a','b','c'], '~') %\u003e\n  \u003c/div\u003e\n\n  \u003c!-- ... --\u003e\n\u003c/html\u003e\n```\n\n## \u003ca name=\"passing-individual-values\"\u003e\u003c/a\u003e Passing individual values\n\nIf you are getting all your `htmlWebpackPlugin` instances generated within a loop, and you want to get indivisual passing values for each `.ejs` template as variables, you can try this. (This method is using `webapck loader inline` mechanic to load every `ejs` file instead, you can also set html-loader/template-ejs-Loader options for each `.ejs` file.)\n\nUnfortunaly, because `webapck loader inline` does not support loader option in which type is function, so basicly the option `preprocessor` of `html-loader` is **NOT** supported here, better try another way if you need to do interpolate things, for example: using `templateEjsLoaderOption.data` to set individual inject value.\n\n`webpack.config.js`\n\n```javascript\nconst { htmlWebpackPluginTemplateCustomizer }  = require('template-ejs-loader')\n...\nmodule.exports = {\n  ...\n\n  plugins: [\n    new HtmlWebpackPlugin({\n      filename: 'index.html',\n      template: htmlWebpackPluginTemplateCustomizer({\n\n        templatePath:'./src/index.ejs' // ejs template path \n\n        htmlLoaderOption:{\n          // you can set individual html-loader option here.\n          // but preprocessor option is not supported.\n        },\n        templateEjsLoaderOption:{ // set individual template-ejs-loader option here\n          root:'', // this is for example, if not needed, just feel free to delete.\n          data:{ // example, too.\n            foo:'test' // btw, you can have indivisual data injection for each .ejs file using data option\n          }\n        }\n      }),\n    }),\n  ]\n\n  ...\n}\n```\n\n## \u003ca name=\"more-info\"\u003e\u003c/a\u003e More info\n\nFor more info on how to use EJS visit their [npm package page](https://www.npmjs.com/package/ejs) or their [official website](http://ejs.co/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdc7290%2Ftemplate-ejs-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdc7290%2Ftemplate-ejs-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdc7290%2Ftemplate-ejs-loader/lists"}