🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

Pug

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

Node.js

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

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

5962閲覧

フロントエンドのwebpack環境構築【画像が表示されない】

atk_3

総合スコア43

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

Pug

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

Node.js

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

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

2クリップ

投稿2019/08/29 09:58

##実現したいこと

webpackでの制作環境を作っていまして、**pug.scss.js*は問題なく動作するのですが
imgフォルダの画像がどうしてもページに表示されません。どうしてでしょうか?

構造

tree

1├── dist 2│ ├── bundle.js 3│ ├── index.html 4│ └── src 5│ └── assets 6├── package-lock.json 7├── package.json 8├── src 9│ ├── assets 10│ │ ├── img 11| | | ├── image.png 12│ │ └── scss 13│ ├── index.js 14│ ├── index.pug 15│ └── pug 16│ ├── _footer.pug 17│ ├── _header.pug 18│ ├── _template.pug 19└── webpack.config.js

indexpug

1extends ./pug/_template.pug 2 3block append var 4block main 5 p. 6 test 7 img.test(src="./assets/img/image.png" alt="hoge") 8 img(src=`${assets_dir}img/image.png` alt="hoge") 9

webpackconfig

1const path = require('path'); 2const CleanWebpackPlugin = require('clean-webpack-plugin'); 3const HtmlWebpackPlugin = require('html-webpack-plugin'); 4const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 5const TerserPlugin = require('terser-webpack-plugin'); 6const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 7 8module.exports = ( env, argv ) => ({ 9 entry: './src/index.js', 10 output: { 11 filename: 'bundle.js', 12 path: path.resolve(__dirname, 'dist') 13 }, 14 15 // 最適化オプションを上書き 16 optimization: { 17 minimizer: [ 18 new TerserPlugin({}), 19 new OptimizeCssAssetsPlugin({}) 20 ] 21 }, 22 23 devtool: 'inline-source-map', 24 25 //サーバーの設定 npm run start:dev 26 devServer: { 27 contentBase: path.resolve(__dirname, 'dist'), 28 // watchContentBase: true, 29 compress: true, 30 port: 8000, 31 open: true, 32 }, 33 34 module: { 35 rules: [ 36 // pug-loaderの設定 37 { 38 test: /.pug$/, 39 use: ['pug-loader'] 40 }, 41 42 // babel-loaderの設定 43 { 44 test: /.js$/, 45 use: [ 46 { 47 loader: 'babel-loader', 48 options: { 49 presets: ['@babel/preset-env'] 50 } 51 } 52 ], 53 exclude: /node_modules/, 54 }, 55 56 // css/sass-loaderの設定 57 { 58 test: /.(sa|sc|c)ss$/, 59 use: [ 60 MiniCssExtractPlugin.loader, 61 { 62 loader: 'css-loader', 63 options: { 64 url: false 65 } 66 }, 67 'sass-loader' 68 ] 69 }, 70 71 // imgの設定 72 { 73 test: /.(png|svg|jpg|gif)/, 74 use: [ 75 'file-loader', 76 ] 77 }, 78 ] 79 }, 80 81 plugins: [ 82 new CleanWebpackPlugin( 83 ['dist'], 84 { 85 // 除外するファイルやディレクトリを指定 86 exclude: ['img'] 87 } 88 ), 89 new MiniCssExtractPlugin({ 90 filename: './src/assets/style.css' 91 }), 92 new HtmlWebpackPlugin({ 93 template: './src/index.pug' 94 }) 95 ] 96}); 97

packkagejson

1{ 2 "name": "myproject", 3 "version": "1.0.0", 4 "description": "", 5 "private": true, 6 "scripts": { 7 "build": "webpack --mode=production", 8 "build:dev": "webpack --mode=development --watch", 9 "start:dev": "webpack-dev-server --mode=development" 10 }, 11 "keywords": [], 12 "author": "", 13 "license": "ISC", 14 "devDependencies": { 15 "@babel/core": "^7.2.2", 16 "@babel/preset-env": "^7.3.1", 17 "babel-loader": "^8.0.5", 18 "clean-webpack-plugin": "^1.0.1", 19 "css-loader": "^2.1.0", 20 "file-loader": "^4.2.0", 21 "html-webpack-plugin": "^3.2.0", 22 "mini-css-extract-plugin": "^0.5.0", 23 "node-sass": "^4.11.0", 24 "optimize-css-assets-webpack-plugin": "^5.0.3", 25 "pug": "^2.0.3", 26 "pug-loader": "^2.4.0", 27 "sass-loader": "^7.1.0", 28 "terser-webpack-plugin": "^1.4.1", 29 "url-loader": "^2.1.0", 30 "webpack": "^4.29.0", 31 "webpack-cli": "^3.2.1", 32 "webpack-dev-server": "^3.8.0" 33 } 34} 35

試したこと

画像以外の参考差分はその都度変更がかかるのですが、画像フォルダのみ色々試したのですが
表示されずにbuild後もdistフォルダにも生成されずに迷っております。

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

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

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

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

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

guest

回答1

0

自己解決

自己解決致しましたので報告致します。

webpack.config.js

1 2 devServer: { 3 contentBase: path.resolve(__dirname, 'src'), 4 // watchContentBase: true, 5 compress: true, 6 port: 8000, 7 open: true, 8 },

上記 devsreverの指定がdistになっていたのをsrcに指定することでローカルサーバー上で画像が表示されました。
src上で画像ファイルがあるが、dist上ではまだないので表示されていなかったようです。

投稿2019/09/02 04:20

atk_3

総合スコア43

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問