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

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

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

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

React.js

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

Q&A

解決済

1回答

1832閲覧

live-server と webpack-dev-server の違いをいまいち理解できません

sasayaka_p

総合スコア20

JavaScript

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

React.js

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

0グッド

0クリップ

投稿2020/03/31 21:54

現在、Reactを勉強しているのですが、webpack-dev-serverを起動すると

■localhost:8080が立ち上がる
■ソースを修正する毎にブラウザが自動で更新される

ということまではわかったのですが、

この違いから、以前はlive-serverを使っていたので
こちらも同様にソースを修正すると自動で反映されるのでこの違いでどこが便利になったのあまりイメージがつきません。

具体的にどのように便利さが違うのか教えていただけないでしょうか。。?

webpackjson

1{ 2 "name": "indecision-app", 3 "version": "1.0.0", 4 "main": "index.js", 5 "license": "MIT", 6 "scripts": { 7 "serve": "live-server public/", 8 "build": "webpack", 9 "dev-server": "webpack-dev-server" 10 }, 11 "dependencies": { 12 "@babel/core": "^7.9.0", 13 "@babel/plugin-proposal-class-properties": "^7.8.3", 14 "@babel/plugin-proposal-object-rest-spread": "^7.9.0", 15 "@babel/preset-env": "^7.9.0", 16 "@babel/preset-react": "^7.9.4", 17 "babel-cli": "6.24.1", 18 "babel-core": "6.25.0", 19 "babel-loader": "7.1.1", 20 "babel-preset-env": "1.5.2", 21 "babel-preset-react": "6.24.1", 22 "build": "^0.1.4", 23 "live-server": "^1.2.0", 24 "node-sass": "^4.13.1", 25 "react": "16.0.0", 26 "react-dom": "16.0.0", 27 "validator": "8.0.0", 28 "webpack": "^4.42.1", 29 "webpack-cli": "^3.3.11", 30 "webpack-dev-server": "^3.10.3" 31 } 32} 33

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

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

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

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

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

guest

回答1

0

ベストアンサー

具体的にどのように便利さが違うのか教えていただけないでしょうか。。?

webpack-dev-serverには、Hot Reloadといって、「ブラウザ全体の再読み込みではなく、必要な部分だけを動的に更新する」機能があります(ただし、活用するにはコードあるいはフレームワークでのサポートが必要です)。

投稿2020/03/31 23:02

maisumakun

総合スコア145121

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問