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

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

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

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

Q&A

解決済

1回答

2855閲覧

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

toromou

総合スコア30

EJS

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

0グッド

0クリップ

投稿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

1// ... 略 2 3<%- include('_header.ejs') %> 4 5// ... 略

package.json

json

1{ 2 "scripts": { 3 "build": "webpack", 4 "watch": "webpack --watch" 5 }, 6 "devDependencies": { 7 "@types/jquery": "^3.3.31", 8 "css-loader": "^3.2.0", 9 "ejs-compiled-loader": "^1.1.0", 10 "html-webpack-plugin": "^3.2.0", 11 "mini-css-extract-plugin": "^0.8.0", 12 "node-sass": "^4.12.0", 13 "node-sass-glob-importer": "^5.3.2", 14 "sass-loader": "^7.1.0", 15 "ts-loader": "^6.2.1", 16 "typescript": "^3.6.4", 17 "webpack": "^4.41.0", 18 "webpack-cli": "^3.3.9", 19 "webpack-fix-style-only-entries": "^0.4.0" 20 }, 21 "dependencies": {} 22} 23

webpack.config.json

js

1const path = require('path'); 2const globImporter = require('node-sass-glob-importer'); 3const HtmlWebpackPlugin = require('html-webpack-plugin'); 4const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 5const FixStyleOnlyEntries = require("webpack-fix-style-only-entries"); 6 7module.exports = { 8 mode: 'development', 9 devtool: 'inline-source-map', 10 entry: { 11 common: './src/scss/common.scss', 12 bundle: './src/ts/main.ts', 13 index: './src/scss/pages/index/index.scss', 14 }, 15 output: { 16 path: path.resolve(__dirname, './dist'), 17 filename: './js/[name].js' 18 }, 19 resolve: { 20 extensions: ['.ts', '.js'] 21 }, 22 module: { 23 rules: [ 24 { 25 test: /.ejs$/, 26 use: 'ejs-compiled-loader' 27 }, 28 29 // typescript 30 { 31 test: /.ts$/, 32 loader: 'ts-loader' 33 }, 34 35 // SASS 36 { 37 test: /.(sa|sc|c)ss$/, 38 use: [ 39 MiniCssExtractPlugin.loader, 40 { 41 loader: 'css-loader', 42 options: { 43 url: false, 44 } 45 }, 46 { 47 loader: 'sass-loader', 48 options: { 49 sourceMap: true, 50 outputStyle: 'expanded', 51 importer: globImporter() 52 } 53 } 54 ] 55 } 56 ] 57 }, 58 plugins: [ 59 new HtmlWebpackPlugin({ 60 filename: './index.html', 61 template: './src/ejs/index.ejs', 62 }), 63 new MiniCssExtractPlugin({ 64 filename: './css/[name].css', 65 }), 66 new FixStyleOnlyEntries(), 67 ] 68}

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

ejs-compiled-loaderからejs, html-loader, ejs-html-loaderの3つに変更すると上手くいきました。
パッケージが増えているのが少々気に食わないですが、とりあえずこれでよしとします。

投稿2020/01/15 02:24

toromou

総合スコア30

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問