☰
yatalog Written by Yataka

webpackでEJSを使用する方法【ejs-compiled-loader】

JavaScript

webpack-ejs

webpackでEJSを使用する方法を紹介します。

今回紹介する方法では、html-webpack-pluginとejs-compiled-loaderを使用しています。

EJSとは

EJS（イージェーエス）とは、テンプレートエンジンと呼ばれるNode.jsのパッケージです。

EJSを使うことでHTMLの共通した記述を使い回すことができ、開発効率が高くなります。

また、if文やfor文といったJavaScriptの基本的な公文も用意されています。

JavaScriptのテンプレートエンジンは他にもたくさんありますが、EJSはHTMLをそのままかけるので初心者でも馴染みやすいです。

テンプレートエンジンのススメ – テンプレートエンジンとは | CodeGrid

昨今、JavaScriptの役割がいろいろと増え、サーバーからもらったデータをもとに、HTMLの断片を作るという処理が増えてきました。そのような場合に役立つテンプレートエンジンについて解説します。

html-webpack-pluginとは

html-webpack-pluginとは、JavaScriptやCSSを埋め込んだHTMLを生成する為のwebpackのプラグインです。

webpackで生成したJavaScriptやCSSにユニークな識別子を付与することでブラウザキャッシュを回避したり、テンプレートとなるHTMLをカスタマイズすることができます。

ejs-compiled-loaderとは

EJSで分割したファイルを読み込むincludeを使用する為のローダーです。

※ejs-loaderではincludeが使えるようにならないようです。

webpackでEJSを使用する方法

webpackがインストールされていることが前提です。

npmを使ってwebpackをインストールする方法

npm(Node Package Manager)でwebpackをインストールする方法を紹介します。webpackとは、複数のjsファイルをまとめるモジュールハンドラです。jsファイルだけでなく、sassファイルなどもまとめることができます。

今回のディレクトリ構造

今回の例として使用するディレクトリ構造は以下の通りです。


├── dist
│   ├── about
│   │   └── index.html
│   └── index.html
├── src
│   ├── about
│   │   └── index.ejs
│   ├── index.ejs
│   └── index.js
├── package-lock.json
├── package.json
└── webpack.config.js

ターミナルでの操作

① html-webpack-pluginをインストールする

npm install html-webpack-plugin --save-dev

②ejs-compiled-loaderをインストールする

npm install --save-dev ejs-compiled-loader

③ package.jsonを確認して正常にインストールされているか確認する


{
"devDependencies": {
    "ejs-compiled-loader": "^1.1.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

④ webpack.config.jsでhtml-webpack-pluginとejs-compiled-loaderを読み込む。


const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      filename: './dist/index.html',
      template: './src/index.ejs',
    }),
    new HtmlWebpackPlugin({
      filename: './dist/about/index.html',
      template: './src/about/index.ejs',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.ejs$/,
        use: 'ejs-compiled-loader',
      },
    ],
  },
  devServer: {
    compress: true,
    contentBase: outputPath,
    port: 9000,
  },
}

⑤　webpackコマンドを実行し、distディレクトリにHTMLが出力されていることを確認する

npx webpack

おわりに

webpackでEJSを使用する方法を紹介しました。

EJSは初心者にも馴染みやすいテンプレートエンジンなので、ぜひ導入を検討してみてください。

>  >  webpackでEJSを使用する方法【ejs-compiled-loader】