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

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

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

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

Q&A

0回答

1425閲覧

[Webpack]HTMLから画像パスの指定がうまくいかない

d0ne1s

総合スコア32

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

0グッド

0クリップ

投稿2020/04/06 08:50

##問題点
webpackを利用し、pugファイル内で画像のパスを指定した時、ビルド後に正しいパスが指定できていない。

現状

#ディレクトリ構成 dist └images └icon.png └index.html └admin └ index.html src └images └ icon.png └templates └ index.pug └ admin └ index.html node_modules package.json package-lock.json webpack.config.json

pug

1// src/templates/index.pug 2img(src="../images/icon.png", alt="")

html

1// dist/index.html 2// このファイルのパスがおかしい 3<img src="../images/icon-e2a5ae3dba673d3cbcf62e3e2c7d8e9e.png" alt="">

pug

1// src/templates/admin/index.html 2img(src="../../images/icon.png", alt="")

html

1// dist/admin/index.html 2<img src="../images/icon-e2a5ae3dba673d3cbcf62e3e2c7d8e9e.png" alt="">

js

1// webpack.config.js 2const path = require('path'); 3const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4const globule = require('globule') 5const HtmlWebpackPlugin = require('html-webpack-plugin'); 6const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 7 8const app = { 9 mode: 'production', 10 // devtool: 'eval-source-map', 11 entry: { 12 main: './src/javascripts/main.js', 13 }, 14 output: { 15 path: path.resolve(__dirname, './dist'), 16 filename: 'javascripts/[name]-[hash].js', 17 }, 18 performance: { 19 maxEntrypointSize: 500000, 20 maxAssetSize: 500000, 21 }, 22 module: { 23 rules: [ 24 { 25 test: /.(css|scss|sass)$/, 26 use: [ 27 { 28 loader: MiniCssExtractPlugin.loader, 29 }, 30 { 31 loader: 'css-loader', 32 options: { sourceMap: true }, 33 }, 34 { 35 loader: "postcss-loader", 36 options: { 37 plugins: [ 38 require("autoprefixer"), 39 ], 40 }, 41 }, 42 { 43 loader: 'sass-loader', 44 }, 45 ], 46 }, 47 { 48 test: /.(png|jpg|jpeg)$/i, 49 use: [ 50 { 51 loader: 'file-loader', 52 options: { 53 esModule: false, 54 name: 'images/[name]-[hash].[ext]', 55 publicPath: path => '../' + path, 56 }, 57 }, 58 { 59 loader: 'image-webpack-loader', 60 options: { 61 mozjpeg: { 62 progressive: true, 63 quality: 65, 64 }, 65 }, 66 }, 67 ], 68 }, 69 { 70 test: /.pug/, 71 use: [ 72 { 73 loader: 'html-loader', 74 }, 75 { 76 loader: 'pug-html-loader', 77 options: { 78 pretty: true, 79 }, 80 }, 81 ], 82 }, 83 ], 84 }, 85 plugins: [ 86 new MiniCssExtractPlugin({ 87 filename: 'stylesheets/[name]-[hash].css', 88 }), 89 new CleanWebpackPlugin(), 90 ], 91}; 92 93const templates = globule.find( 94 './src/templates/**/*.pug', { 95 ignore: [ 96 './src/templates/**/_*.pug' 97 ] 98 } 99) 100 101templates.forEach((template) => { 102 const fileName = template.replace('./src/templates/', '').replace('.pug', '.html') 103 app.plugins.push( 104 new HtmlWebpackPlugin({ 105 filename: `${fileName}`, 106 template: template, 107 }) 108 ) 109}) 110 111module.exports = app

試したこと

webpack.config.js内、file-loaderの設定を以下のように変更

js

1{ 2 loader: 'file-loader', 3 options: { 4 esModule: false, 5 name: 'images/[name]-[hash].[ext]', 6 publicPath: '/' //この行を変更 7 } 8}

このように変更すると、全ての画像パスがルートディレクトリからの指定になってしまい、レンタルサーバーのサブディレクトリ等にデプロイすることができなくなってしまいました。

その他必要な情報等ございましたら、ご指摘いただけますと幸いです。
どうぞよろしくお願いいたします。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問