質問編集履歴

4

導入後の状態を追加

2021/07/18 07:29

投稿

okaka33
okaka33

スコア2

test CHANGED
@@ -1 +1 @@
1
- ejs linkタグとscriptタグの順番が逆にビルドされる
1
+ ejs linkタグとscriptタグのビルド順を変えたい
test CHANGED
@@ -2,15 +2,21 @@
2
2
 
3
3
 
4
4
 
5
- いつもお世話になっております。
6
-
7
5
  最近、開発環境構築の勉強をし始めたのですが
8
6
 
9
- テンプレートエンジン「EJS」ファイルをコンパイルしたときに
7
+ テンプレートエンジン「EJS」をコンパイルしたときに
8
+
10
-
9
+ scriptタグ
10
+
11
+ linkタグ
12
+
11
- linkタグとscriptタグの順番逆にビルドされてしまいます。
13
+ の順番逆にビルドされてしまいます。
14
+
12
-
15
+ linkタグ
16
+
17
+ scriptタグ
18
+
13
- これは仕方がなことなのでしょうか?
19
+ の順番でコンパイルしたいのですがどうすればよろいでしょうか?
14
20
 
15
21
  イメージですが下記のようになっております。
16
22
 
@@ -58,6 +64,12 @@
58
64
 
59
65
  const {CleanWebpackPlugin} = require("clean-webpack-plugin");
60
66
 
67
+ const CopyPlugin = require("copy-webpack-plugin");
68
+
69
+ const ImageminPlugin = require("imagemin-webpack-plugin").default;
70
+
71
+ const ImageminMozjpeg = require("imagemin-mozjpeg");
72
+
61
73
 
62
74
 
63
75
  module.exports={
@@ -70,25 +82,79 @@
70
82
 
71
83
  path: `${__dirname}/dist`,
72
84
 
73
- filename: "assets/js/index.js"
85
+ filename: "assets/js/bundle.js"
74
86
 
75
87
  },
76
88
 
77
89
  plugins:[
78
90
 
91
+ new HtmlWebpackPlugin({
92
+
93
+ template: "./src/ejs/index.ejs",
94
+
95
+ filename: "index.html",
96
+
97
+ minify: false,
98
+
99
+ }),
100
+
79
101
  new MiniCssExtractPlugin({
80
102
 
81
- filename: "assets/css/style.css"
103
+ filename: "assets/css/style.css",
82
-
104
+
83
- }),
105
+ }),
84
-
106
+
85
- new HtmlWebpackPlugin({
107
+ new ImageminPlugin({
86
-
108
+
87
- template: "./src/ejs/index.ejs",
109
+ test: /.(jpe?g|png|gif|svg)/,
110
+
88
-
111
+ pngquant: {
112
+
113
+ quality: "65-80"
114
+
115
+ },
116
+
117
+ gifsicle: {
118
+
119
+ interlaced: false,
120
+
121
+ optimizationLevel: 1,
122
+
123
+ colors: 256
124
+
125
+ },
126
+
127
+ svgo: {
128
+
129
+ },
130
+
131
+ plugins: [
132
+
133
+ ImageminMozjpeg({
134
+
135
+ quality: 80,
136
+
137
+ progressive: true
138
+
139
+ })
140
+
141
+ ]
142
+
143
+ }),
144
+
145
+ new CopyPlugin({
146
+
147
+ patterns:[
148
+
149
+ {
150
+
89
- filename: "index.html",
151
+ from: "src/image",
90
-
152
+
91
- minify: false
153
+ to: "assets/image"
154
+
155
+ }
156
+
157
+ ]
92
158
 
93
159
  }),
94
160
 
@@ -102,6 +168,24 @@
102
168
 
103
169
  {
104
170
 
171
+ test: /.(jpe?g|png|gif|svg)/,
172
+
173
+ use: {
174
+
175
+ loader: "file-loader",
176
+
177
+ options:{
178
+
179
+ name: "../img/[name].[ext]",
180
+
181
+ }
182
+
183
+ }
184
+
185
+ },
186
+
187
+ {
188
+
105
189
  test: /.(scss|sass|css)/,
106
190
 
107
191
  use:[
@@ -152,69 +236,47 @@
152
236
 
153
237
  {
154
238
 
155
- loader: "sass-loader",
239
+ loader: "sass-loader"
240
+
241
+ }
242
+
243
+ ]
244
+
245
+ },
246
+
247
+ {
248
+
249
+ test: /.ejs/,
250
+
251
+ use:[
252
+
253
+ {
254
+
255
+ loader: "html-loader",
156
256
 
157
257
  options:{
158
258
 
159
- sourceMap: true
259
+ minimize: false
160
260
 
161
261
  }
162
262
 
263
+ },
264
+
265
+ {
266
+
267
+ loader: "ejs-plain-loader"
268
+
163
269
  }
164
270
 
165
271
  ]
166
272
 
167
- },
168
-
169
- {
170
-
171
- test: /.(jpe?g|png|gif|svg)/,
172
-
173
- use: {
174
-
175
- loader: "file-loader",
176
-
177
- options:{
178
-
179
- name: "../img/[name].[ext]",
180
-
181
- }
182
-
183
- }
184
-
185
- },
186
-
187
- {
188
-
189
- test: /.ejs/,
190
-
191
- use:[
192
-
193
- {
194
-
195
- loader: "html-loader",
196
-
197
- options:{
198
-
199
- minimize: false
200
-
201
- }
202
-
203
- },
204
-
205
- {
206
-
207
- loader: "ejs-plain-loader"
208
-
209
- }
210
-
211
- ]
212
-
213
273
  }
214
274
 
215
275
  ]
216
276
 
217
- }
277
+ },
278
+
279
+ target: ["web", "es5"]
218
280
 
219
281
  };
220
282
 
@@ -226,4 +288,4 @@
226
288
 
227
289
 
228
290
 
229
- webpack.config.jsの記載順少し変えてみたりもしましたが、解決されませんでした
291
+ injectなど使ってみましたが改善されませんでした

3

タイトルを一部変更

2021/07/18 07:29

投稿

okaka33
okaka33

スコア2

test CHANGED
@@ -1 +1 @@
1
- EJS linkタグとscriptタグの順番が逆にビルドされる
1
+ ejs linkタグとscriptタグの順番が逆にビルドされる
test CHANGED
File without changes

2

タイトルを一部変更

2021/07/13 08:50

投稿

okaka33
okaka33

スコア2

test CHANGED
File without changes
test CHANGED
File without changes

1

タイトルを一部変更

2021/07/07 03:27

投稿

okaka33
okaka33

スコア2

test CHANGED
@@ -1 +1 @@
1
- webpack linkタグとscriptタグの順番が逆にビルドされる
1
+ EJS linkタグとscriptタグの順番が逆にビルドされる
test CHANGED
File without changes