前提・実現したいこと
最近、開発環境構築の勉強をし始めたのですが
テンプレートエンジン「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などを使ってみましたが改善されませんでした
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。