質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

解決済

webpack4でEJSのinclude()を使うとエラーが出る

toromou
toromou

総合スコア30

EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

1回答

0評価

0クリップ

1183閲覧

投稿2020/01/13 08:38

編集2020/01/13 08:43

webpack4でEJS,SASS,TypeScriptの構成を作っています。
index.ejsでinclude()を使い_header.ejsを読み込みたいのですが、以下のようなエラーが出て上手くいきません。

ERROR in Error: Child compilation failed: Module build failed (from ./node_modules/ejs-compiled-loader/index.js): Error: ENOENT: no such file or directory, open '('_header.ejs')'

ちなみに変数の出力などは問題なく出来ています。
お詳しい方がいらっしゃいましたらご教授のほどよろしくお願いします。

ディレクトリ構成

root/ ├ .git/ ├ dist/ │ ├ css/ │ ├ js/ │ └ index.html ├ node_module/ ├ src/ │ ├ ejs/ │ | ├ _header.ejs | | └ index.ejs │ ├ img/ │ ├ scss/ │ └ ts/ ├ .gitignore ├ package.json ├ package-lock.json ├ tsconfig.json └ webpack.config.js

index.ejs

ejs

// ... 略 <%- include('_header.ejs') %> // ... 略

package.json

json

{ "scripts": { "build": "webpack", "watch": "webpack --watch" }, "devDependencies": { "@types/jquery": "^3.3.31", "css-loader": "^3.2.0", "ejs-compiled-loader": "^1.1.0", "html-webpack-plugin": "^3.2.0", "mini-css-extract-plugin": "^0.8.0", "node-sass": "^4.12.0", "node-sass-glob-importer": "^5.3.2", "sass-loader": "^7.1.0", "ts-loader": "^6.2.1", "typescript": "^3.6.4", "webpack": "^4.41.0", "webpack-cli": "^3.3.9", "webpack-fix-style-only-entries": "^0.4.0" }, "dependencies": {} }

webpack.config.json

js

const path = require('path'); const globImporter = require('node-sass-glob-importer'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const FixStyleOnlyEntries = require("webpack-fix-style-only-entries"); module.exports = { mode: 'development', devtool: 'inline-source-map', entry: { common: './src/scss/common.scss', bundle: './src/ts/main.ts', index: './src/scss/pages/index/index.scss', }, output: { path: path.resolve(__dirname, './dist'), filename: './js/[name].js' }, resolve: { extensions: ['.ts', '.js'] }, module: { rules: [ { test: /.ejs$/, use: 'ejs-compiled-loader' }, // typescript { test: /.ts$/, loader: 'ts-loader' }, // SASS { test: /.(sa|sc|c)ss$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { url: false, } }, { loader: 'sass-loader', options: { sourceMap: true, outputStyle: 'expanded', importer: globImporter() } } ] } ] }, plugins: [ new HtmlWebpackPlugin({ filename: './index.html', template: './src/ejs/index.ejs', }), new MiniCssExtractPlugin({ filename: './css/[name].css', }), new FixStyleOnlyEntries(), ] }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。