Q&A前提・実現したいこと
Webpack5でWebサイトを作っています。HTMLテンプレートにejsを使用しているのですが、ejs内のimgタグで読み込んだ画像ファイルがうまく読み込めません。
また、画像の出力結果も意図した通りにならず原因が分からなくて困っています。
お知恵を貸していただけると嬉しいです。
該当のソースコード
ejs
1~~~ 2<body> 3 <%- include('./pages/index.ejs') %> 4 <img src="./assets/images/slide01.png" alt=""> 5</body>
webpack
1const path = require('path'); 2const HtmlWebpackPlugin = require('html-webpack-plugin'); 3const { VueLoaderPlugin } = require('vue-loader'); 4 5module.exports = { 6 mode: "development", 7 devtool: "inline-source-map", 8 entry: "./src/index.js", 9 output: { 10 filename: "[name]-[chunkhash].js", 11 path: path.resolve(__dirname, "dist"), 12 clean: true, 13 }, 14 devServer: { 15 contentBase: "./dist", 16 }, 17 module: { 18 rules: [ 19 { 20 test: /.scss$/, 21 use: [ 22 "vue-style-loader", 23 { 24 loader: "css-loader", 25 options: { 26 url: false, 27 }, 28 }, 29 "sass-loader", 30 ], 31 }, 32 { 33 test: /.vue$/, 34 use: ["vue-loader"], 35 }, 36 { 37 test: /.js/, 38 use: ["babel-loader"], 39 exclude: (file) => /node_modules/.test(file) && !/.vue.js/.test(file), 40 }, 41 { 42 test: /.ejs$/, 43 use: [ 44 "html-loader", // loader for html files goes here 45 "ejs-plain-loader", 46 ], 47 }, 48 { 49 test: /.(png|svg|jpe?g|gif)$/, 50 // type: "asset/inline", 51 loader: "file-loader", 52 options: { 53 name: "[name]-[contenthash].[ext]", 54 outputPath: "assets/images", 55 }, 56 }, 57 ], 58 }, 59 plugins: [ 60 new HtmlWebpackPlugin({ 61 template: "./src/index.ejs", 62 filename: "index.html", 63 inject: "body", 64 }), 65 new VueLoaderPlugin(), 66 ], 67 // ES5(IE11等)向けの指定（webpack 5以上で必要） 68 target: ["web", "es5"], 69};
HTML
1// 1. typeに何も指定しない場合のHTML出力結果 2<body> 3 <h3>Hello!!</h3> 4 <img src="0f95f63ec4988ab855a7.png" alt=""> 5 <script defer src="main-c3903753686d7d897e9d.js"></script> 6</body> 7 8// 2. type: "asset/inline"の場合のHTML出力結果 9<body> 10 <h3>Hello!!</h3> 11 <img src="data:image/png;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiYXNzZXRzL2ltYWdlcy9zbGlkZTAxLWQyMDE4MzYzMDYwODc5OTlmODA5MDM5MzVjYjYzNzdkLnBuZyI7" alt=""> 12 <script defer src="main-c3903753686d7d897e9d.js"></script> 13</body>
試したこと
type: "asset/inline"などで、typeを変えてみたりしました。
ですが、上記「HTML」ソース内1.の場合、optionsの内容にも関わらず、./dist直下に 0f95f63ec4988ab855a7.png が生成され、そちらを読み込んでいました。さらに、その0f95f63ec4988ab855a7.pngが中身がなく、エディタで確認してもエラーとなり当然サイトにも反映されません。
上記2の場合は、画像の出力結果は意図通り./dist/assets/images/内に[name]-[contenthash].[ext]の名前で出力されるのですが、今度はhtml内の参照が意図したパスではなく、 data:image~ となっているためかやはり読み込めていません。
Webpack自体触ったばかりなので画像の読み込み方自体間違っているかもしれません。
ただ、以前にも自分でloaderやパッケージを入れて構築した際は問題なく画像を読み込めたので、これ以上見当がつきません…。
宜しくお願いいたします。
補足情報（FW/ツールのバージョンなど）
json
1// package.jsonの一部 2"devDependencies": { 3 "@babel/core": "^7.13.8", 4 "@babel/preset-env": "^7.13.9", 5 "babel-loader": "^8.2.2", 6 "core-js": "^3.9.1", 7 "css-loader": "^5.1.1", 8 "ejs-plain-loader": "^1.4.1", 9 "file-loader": "^6.2.0", 10 "html-loader": "^2.1.1", 11 "html-webpack-plugin": "^5.3.0", 12 "mini-css-extract-plugin": "^1.3.9", 13 "regenerator-runtime": "^0.13.7", 14 "sass": "^1.32.8", 15 "sass-loader": "^11.0.1", 16 "style-loader": "^2.0.0", 17 "vue-loader": "^15.9.6", 18 "vue-template-compiler": "^2.6.12", 19 "webpack": "^5.24.4", 20 "webpack-cli": "^4.5.0", 21 "webpack-dev-server": "^3.11.2" 22 },
回答1件
0
自己解決
Webpack5より、追加のloader不要で画像の読み込みが可能になっているようでした(asset modules)。
そこにloaderをinstallしてしまっているせいで、2度コンパイルされるような現象が起こっていたと言えそうです。
画像部分を下記に変えたところうまくいきました。
{ test: /.(png|svg|jpe?g|gif)$/, type: "asset/resource", generator: { filename: "./assets/images/[name]-[contenthash].[ext]" } },
投稿2021/03/13 20:18
総合スコア12
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。