EJSにデータを注入する

1 min読了の目安(約700字TECH技術記事

環境

  • ejs-easy-loader: "^0.1.4",
  • html-webpack-plugin: "^4.5.0",
  • webpack: "^4.44.2",

注入方法

ファイル個別

// src/config.js
module.exports = {
  hoge: 'ほげ',
};
// webpack.config.js
const config = require('./src/config');

new HtmlWebpackPlugin({
  data: config.data,  // ←
});
<!-- ejs -->
<%= htmlWebpackPlugin.options.data.hoge %>

HtmlWebpackPluginのインスタンスに適当なkey/valueでデータを渡すと、EJSからhtmlWebpackPlugin.options.xxxでアクセスすることが出来る。

グローバル

<%
  const page = require('./page.config.js');
%>

余談

ejs-html-loaderだとoptions経由でデータを注入できるのだが、ejs-easy-loaderのようにページ個別のデータとして渡すことが出来ない。

https://www.npmjs.com/package/ejs-html-loader#usage