コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド jsチュートリアル webpack-dev-server_javascript スキルの簡単な使用方法の詳細な説明

webpack-dev-server_javascript スキルの簡単な使用方法の詳細な説明

不言
不言
Apr 03, 2018 am 09:36 AM
javascript web

この記事では主に webpack-dev-server の簡単な使い方を詳しく紹介しますので、参考にしてください。エディターをフォローして見てみましょう

webpack-dev-server

webpack-dev-server は、webpack-dev-middleware を使用して webpack パッケージを提供する小さな Node.js Express サーバーです。 Sock.js を介してサーバーに接続するマイクロ ランタイムがあります

次の設定ファイル (webpack.config.js) を見てみましょう 

var path = require("path");
module.exports = {
 entry:{
 app:["./app/main.js"]
 },
 output:{
 path:path.resolve(__dirname,"build"),
 publicPath:"/assets/",
 filename:"bundle.js"
}
}
ログイン後にコピー

ここで、ソース ファイルは以下に配置されます。

注: webpack-dev-server は独立した NPM パッケージであり、npm -server を介して webpack-dev をインストールできます。

基本ディレクトリ

webpack-dev-server は、指定しない限り、デフォルトで現在のディレクトリをベース ディレクトリとして使用します。

webpack-dev-server --content-base build/
ログイン後にコピー

上記のコマンドはコマンド ラインで実行され、ビルド ディレクトリが次のように使用されます。注意すべき点の 1 つは、webpack-dev-server によって生成されたパッケージは実際のディレクトリではなくメモリに配置されるということです。

ベース ディレクトリに新しいパッケージを作成してから、index.html ファイルを作成します。ブラウザに http://localhost:8080 と入力してアクセスします。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script src="assets/bundle.js"></script>
</body>
</html>
ログイン後にコピー

自動更新

webpack-dev-server は、ページを自動的に更新する 2 つのモードをサポートしています。

  1. iframe モード (ページは iframe に配置され、変更が発生すると再ロードされます)

  2. インライン モード (webpack-dev-sever のクライアント エントリをバンドルに追加します)

2 種類 すべてのモードでホット モジュール交換がサポートされています。ホットモジュール置換とは、ページの再読み込みではなく、更新された部分のみが置換されることです。

iframe モード
このモードを使用するために追加の設定は必要ありません。次の設定を行うだけです。任意の URL 形式でアクセスできます

http://«host »:«port»/webpack-dev-server/«path»

例: http://localhost:8080/webpack-dev-server/index.html.

インラインモード

インラインモードこのモードを有効にする場合、アクセスする URL を変更する必要はありません。

1 コマンド ラインから webpack-dev-server を起動する場合、次の 2 つのことを行う必要があります:

  1. --inline を追加するコマンドラインでコマンド

  2. webpack.config.js に devServer:{inline:true} を追加します

2 Node.js API で webpack-dev-server を起動する場合 これを行うとき、2 つのことも行う必要があります:

  1. webpack-dev-server の設定にはインライン オプションがないため、エントリ エントリに webpack-dev-server/client?http://«path»:«port»/ を追加する必要がありますWebpack 設定のポイント

  2. を HTML ファイルに追加します

 var config = require("./webpack.config.js");
 var webpack = require(&#39;webpack&#39;);
 var WebpackDevServer = require(&#39;webpack-dev-server&#39;);

config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");

var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
 contentBase:&#39;build/&#39;,
 publicPath: "/assets/"
});
server.listen(8080);
ログイン後にコピー

Node で上記のコードを実行するだけです。

注: Webpack 設定の devSever 設定項目は、コマンド ライン モードでのみ有効です。

(ホットモジュール交換) ホットモジュール交換

コマンドラインでインラインモードを実行し、ホットモジュール交換を有効にします

以下に示すように、ここに --hot コマンドを追加するだけです。

注: コマンドラインモードでは、コンパイルされたパッケージ (バンドル) のアクセス場所を指定するために、webpack.config.js でoutput.publicPath を設定する必要があります。

Nodejs API でインラインモードを実行し、ホットモジュール置換を有効にします

ここで次の 3 つのことを行う必要があります:

webpack.config.js のエントリ オプションを追加します: webpack/hot/dev-server

  1. webpack.config.js の plugins オプションを追加します: new webpack.HotModuleReplacementPlugin()

  2. webpack-dev-server の構成を追加します: hot:true

  3. webpack-dev-server の構成オプション


webpack-dev-server --content-base build --inline --hot
ログイン後にコピー

参照: http:// webpack.github.io/docs/webpack-dev-server.html

関連推奨事項:


webpack-dev-server のリモート モードを設定する方法

webpack-dev-server は http-proxy を使用してクロスドメインの問題を解決する詳細な説明

以上がwebpack-dev-server_javascript スキルの簡単な使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
2週間前 By 尊渡假赌尊渡假赌尊渡假赌
レポ：チームメイトを復活させる方法
4週間前 By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
4週間前 By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前 By DDD
R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？
3週間前 By DDD
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7333
9
Java チュートリアル
1627
14
CakePHP チュートリアル
1351
46
Laravel チュートリアル
1262
25
PHP チュートリアル
1209
29
もっと見る
Related knowledge
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジー はじめに： インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

コックピット Web UI から管理アクセスを有効にする方法 コックピット Web UI から管理アクセスを有効にする方法 Mar 20, 2024 pm 06:56 PM

Cockpit は、Linux サーバー用の Web ベースのグラフィカル インターフェイスです。これは主に、初心者/熟練ユーザーにとって Linux サーバーの管理を容易にすることを目的としています。この記事では、Cockpit アクセス モードと、CockpitWebUI から Cockpit への管理アクセスを切り替える方法について説明します。コンテンツ トピック: コックピット エントリ モード 現在のコックピット アクセス モードの確認 CockpitWebUI からコックピットへの管理アクセスを有効にする CockpitWebUI からコックピットへの管理アクセスを無効にする まとめ コックピット エントリ モード コックピットには 2 つのアクセス モードがあります。 制限付きアクセス: これは、コックピット アクセス モードのデフォルトです。このアクセス モードでは、コックピットから Web ユーザーにアクセスできません。

PHP は Web 開発におけるフロントエンドですか、それともバックエンドですか? PHP は Web 開発におけるフロントエンドですか、それともバックエンドですか? Mar 24, 2024 pm 02:18 PM

PHP は Web 開発のバックエンドに属します。 PHP はサーバー側のスクリプト言語であり、主にサーバー側のロジックを処理し、動的な Web コンテンツを生成するために使用されます。フロントエンド テクノロジーと比較して、PHP はデータベースとの対話、ユーザー リクエストの処理、ページ コンテンツの生成などのバックエンド操作に多く使用されます。次に、特定のコード例を使用して、バックエンド開発における PHP のアプリケーションを説明します。まず、データベースに接続してデータをクエリするための簡単な PHP コード例を見てみましょう。

See all articles