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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Node.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

受付中

webpackで出力されるファイルが多い場合のデプロイ方法

HS1111
HS1111

総合スコア85

Node.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0回答

0評価

0クリップ

119閲覧

投稿2022/06/12 14:03

webpack初学者です。

webpackでfontawesomeやbootstrapのcssをバンドルしているのですが、出力されるdistフォルダの中に、png,woff,gif,svg,eotの雑多なファイルが出力されます。

この大量のファイルは本番環境にデプロイする際に必要でしょうか?
配布管理するファイルを極力少なくしたくwebpackを試していていましが、これは如何に??と感じております。

これは正常な状態なのでしょうか?
宜しくお願いします。


webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: { top: `${__dirname}/src/index.js`, }, mode: 'production', output: { path: `${__dirname}/dist`, filename: '[name]_bundle_[chunkhash].js' }, module: { rules: [ { test: /\.css$/i, use: [ { loader: "style-loader" }, { loader: "css-loader"} ] }, ] }, plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html", inject: "body", scriptLoading: "defer" }), ], target: ["web", "es5"], devtool: false, performance: { hints: false }, devServer: { static: { directory: `${__dirname}/dist`, }, open: true } }

出力されるdist内のファイル

-rw-r--r-- 1 hogehoge staff 547 6 12 22:38 0ff4d62150facee6b7de.png -rw-r--r-- 1 hogehoge staff 224592 6 12 22:38 126e4e16f5400ed7fb99.woff -rw-r--r-- 1 hogehoge staff 866 6 12 22:38 14d740b6ee64510747b0.gif -rw-r--r-- 1 hogehoge staff 2182455 6 12 22:38 1a812d84040362f3cbe1.svg -rw-r--r-- 1 hogehoge staff 450238 6 12 22:38 1c9c47c2e74e9e4a5d07.eot -rw-r--r-- 1 hogehoge staff 213 6 12 22:38 1fd3bfd5831b5af640a3.png -rw-r--r-- 1 hogehoge staff 211 6 12 22:38 2006e36b1a39bb1ce0cb.png -rw-r--r-- 1 hogehoge staff 137 6 12 22:38 2012ae6071a90778f12d.png -rw-r--r-- 1 hogehoge staff 134294 6 12 22:38 2ac0cbf0ae3aa5e15f77.eot -rw-r--r-- 1 hogehoge staff 449944 6 12 22:38 2e9a4f2704b8d8428494.ttf -rw-r--r-- 1 hogehoge staff 168824 6 12 22:38 33904a1b964c9b363ce7.woff2 -rw-r--r-- 1 hogehoge staff 747884 6 12 22:38 363e840666219cf3436e.svg -rw-r--r-- 1 hogehoge staff 562672 6 12 22:38 3785dc4992830f749773.ttf -rw-r--r-- 1 hogehoge staff 488992 6 12 22:38 431c25ff502d4460d3ec.ttf -rw-r--r-- 1 hogehoge staff 215 6 12 22:38 535b98d8b10c9c1713fb.png -rw-r--r-- 1 hogehoge staff 213 6 12 22:38 53687cbe6512fb70292f.png -rw-r--r-- 1 hogehoge staff 137104 6 12 22:38 54dfc8f551be346014e4.woff2 -rw-r--r-- 1 hogehoge staff 383828 6 12 22:38 601a1847bf98e6bf4b94.ttf -rw-r--r-- 1 hogehoge staff 183368 6 12 22:38 6057f0f7f9a9a68b2eed.woff -rw-r--r-- 1 hogehoge staff 2444593 6 12 22:38 76f70e6c0db0270aebcc.svg -rw-r--r-- 1 hogehoge staff 146 6 12 22:38 83eb2c7e2892a66afe14.png -rw-r--r-- 1 hogehoge staff 562970 6 12 22:38 8c456be8af278cd56934.eot -rw-r--r-- 1 hogehoge staff 245416 6 12 22:38 8df58881554c80bdbc5a.woff -rw-r--r-- 1 hogehoge staff 2660033 6 12 22:38 906b0b52d7b4e504b630.svg -rw-r--r-- 1 hogehoge staff 89988 6 12 22:38 92ee10240bc7f84042de.woff -rw-r--r-- 1 hogehoge staff 133988 6 12 22:38 aa21aa27a6be24f99e40.ttf -rw-r--r-- 1 hogehoge staff 489274 6 12 22:38 ab918e79c8dbce95d715.eot -rw-r--r-- 1 hogehoge staff 182080 6 12 22:38 ba609dbee69bb7ea5f84.woff2 -rw-r--r-- 1 hogehoge staff 209 6 12 22:38 bc6306f4b8105410a282.png -rw-r--r-- 1 hogehoge staff 258976 6 12 22:38 bec1e8c8305076901a85.woff -rw-r--r-- 1 hogehoge staff 1784910 6 12 22:38 ceb187c9cc886c93094c.svg -rw-r--r-- 1 hogehoge staff 1060211 6 12 22:38 top_bundle_5ed7b7edb33c9bfc2737.js -rw-r--r-- 1 hogehoge staff 312 6 12 22:38 top_bundle_5ed7b7edb33c9bfc2737.js.LICENSE.txt -rw-r--r-- 1 hogehoge staff 184204 6 12 22:38 d3271a5651ab5ba62d85.woff2 -rw-r--r-- 1 hogehoge staff 211 6 12 22:38 d50a610ed86c3d5363bb.png -rw-r--r-- 1 hogehoge staff 215 6 12 22:38 db6e2d88c7c35a775ce4.svg -rw-r--r-- 1 hogehoge staff 384110 6 12 22:38 dcddb714e825d85920df.eot -rw-r--r-- 1 hogehoge staff 76728 6 12 22:38 df56145e6ac7861a1c0a.woff2 -rw-r--r-- 1 hogehoge staff 1554 6 12 22:38 f64c3af3d0d25b9e4e00.svg -rw-r--r-- 1 hogehoge staff 214 6 12 22:38 f7c6ac6d310d3b82f0a0.svg -rw-r--r-- 1 hogehoge staff 211 6 12 22:38 f9d01435976a8cfb9daa.png -rw-r--r-- 1 hogehoge staff 6908 6 12 22:38 index.html

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

gU8C8Nud4E8p3uW

2022/06/13 02:32

全部バンドルしたら、使用していようがいまいが「使われるかもしれない」と配布物に含まれてしまうのは当然ではないでしょうか。少なくともbootstrapならimportの書き方を工夫して使用しない機能を省くことはできたはず。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Node.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。