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}

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。