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

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

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

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Q&A

解決済

1回答

931閲覧

ejs linkタグとscriptタグのビルド順を変えたい

okaka33

総合スコア2

EJS

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

0グッド

0クリップ

投稿2021/07/07 02:30

編集2021/07/18 07:29

前提・実現したいこと

最近、開発環境構築の勉強をし始めたのですが
テンプレートエンジン「EJS」をコンパイルしたときに
scriptタグ
linkタグ
の順番で逆にビルドされてしまいます。
linkタグ
scriptタグ
の順番でコンパイルしたいのですがどうすればよろしいでしょうか?
イメージですが下記のようになっております。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script defer src="assets/js/index.js"></script> <link href="assets/css/style.css" rel="stylesheet"> </head>

もし改善できる方法などあればお伺いさせていただきたいです。
よろしくお願い致します。

該当のソースコード

webpackconfig

1const HtmlWebpackPlugin = require("html-webpack-plugin"); 2const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 3const {CleanWebpackPlugin} = require("clean-webpack-plugin"); 4const CopyPlugin = require("copy-webpack-plugin"); 5const ImageminPlugin = require("imagemin-webpack-plugin").default; 6const ImageminMozjpeg = require("imagemin-mozjpeg"); 7 8module.exports={ 9 mode: "development", 10 entry: `./src/index.js`, 11 output:{ 12 path: `${__dirname}/dist`, 13 filename: "assets/js/bundle.js" 14 }, 15 plugins:[ 16 new HtmlWebpackPlugin({ 17 template: "./src/ejs/index.ejs", 18 filename: "index.html", 19 minify: false, 20 }), 21 new MiniCssExtractPlugin({ 22 filename: "assets/css/style.css", 23 }), 24 new ImageminPlugin({ 25 test: /.(jpe?g|png|gif|svg)/, 26 pngquant: { 27 quality: "65-80" 28 }, 29 gifsicle: { 30 interlaced: false, 31 optimizationLevel: 1, 32 colors: 256 33 }, 34 svgo: { 35 }, 36 plugins: [ 37 ImageminMozjpeg({ 38 quality: 80, 39 progressive: true 40 }) 41 ] 42 }), 43 new CopyPlugin({ 44 patterns:[ 45 { 46 from: "src/image", 47 to: "assets/image" 48 } 49 ] 50 }), 51 new CleanWebpackPlugin() 52 ], 53 module:{ 54 rules:[ 55 { 56 test: /.(jpe?g|png|gif|svg)/, 57 use: { 58 loader: "file-loader", 59 options:{ 60 name: "../img/[name].[ext]", 61 } 62 } 63 }, 64 { 65 test: /.(scss|sass|css)/, 66 use:[ 67 { 68 loader: MiniCssExtractPlugin.loader 69 }, 70 { 71 loader: "css-loader", 72 options:{ 73 url: false, 74 sourceMap: true 75 } 76 }, 77 { 78 loader: "postcss-loader", 79 options:{ 80 postcssOptions:{ 81 plugins:[ 82 require("autoprefixer")({ 83 grid: true, 84 }) 85 ] 86 } 87 } 88 }, 89 { 90 loader: "sass-loader" 91 } 92 ] 93 }, 94 { 95 test: /.ejs/, 96 use:[ 97 { 98 loader: "html-loader", 99 options:{ 100 minimize: false 101 } 102 }, 103 { 104 loader: "ejs-plain-loader" 105 } 106 ] 107 } 108 ] 109 }, 110 target: ["web", "es5"] 111};

試したこと

injectなどを使ってみましたが改善されませんでした

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

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

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

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

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

guest

回答1

0

自己解決

こちら解決しました。
injectを変更して対応しました

投稿2021/07/18 16:20

okaka33

総合スコア2

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問