この記事では主に 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 つのモードをサポートしています。
iframe モード (ページは iframe に配置され、変更が発生すると再ロードされます)
インライン モード (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 つのことを行う必要があります:
--inline を追加するコマンドラインでコマンド
webpack.config.js に devServer:{inline:true} を追加します
2 Node.js API で webpack-dev-server を起動する場合 これを行うとき、2 つのことも行う必要があります:
webpack-dev-server の設定にはインライン オプションがないため、エントリ エントリに webpack-dev-server/client?http://«path»:«port»/ を追加する必要がありますWebpack 設定のポイント
を HTML ファイルに追加します
var config = require("./webpack.config.js");
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
contentBase:'build/',
publicPath: "/assets/"
});
server.listen(8080);
Node で上記のコードを実行するだけです。
注: Webpack 設定の devSever 設定項目は、コマンド ライン モードでのみ有効です。
(ホットモジュール交換) ホットモジュール交換
コマンドラインでインラインモードを実行し、ホットモジュール交換を有効にします
以下に示すように、ここに --hot コマンドを追加するだけです。
注: コマンドラインモードでは、コンパイルされたパッケージ (バンドル) のアクセス場所を指定するために、webpack.config.js でoutput.publicPath を設定する必要があります。 Nodejs API でインラインモードを実行し、ホットモジュール置換を有効にしますここで次の 3 つのことを行う必要があります:
- webpack.config.js の plugins オプションを追加します: new webpack.HotModuleReplacementPlugin()
- webpack-dev-server の構成を追加します: hot:true
- 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 サイトの他の関連記事を参照してください。
JavaScriptフレームワーク：最新のWeb開発のパワーMay 02, 2025 am 12:04 AMJavaScriptフレームワークのパワーは、開発を簡素化し、ユーザーエクスペリエンスとアプリケーションのパフォーマンスを向上させることにあります。フレームワークを選択するときは、次のことを検討してください。1。プロジェクトのサイズと複雑さ、2。チームエクスペリエンス、3。エコシステムとコミュニティサポート。
JavaScript、C、およびブラウザの関係May 01, 2025 am 12:06 AMはじめに私はあなたがそれを奇妙に思うかもしれないことを知っています、JavaScript、C、およびブラウザは正確に何をしなければなりませんか？彼らは無関係であるように見えますが、実際、彼らは現代のウェブ開発において非常に重要な役割を果たしています。今日は、これら3つの間の密接なつながりについて説明します。この記事を通して、JavaScriptがブラウザでどのように実行されるか、ブラウザエンジンでのCの役割、およびそれらが協力してWebページのレンダリングと相互作用を駆動する方法を学びます。私たちは皆、JavaScriptとブラウザの関係を知っています。 JavaScriptは、フロントエンド開発のコア言語です。ブラウザで直接実行され、Webページが鮮明で興味深いものになります。なぜJavascrを疑問に思ったことがありますか
node.jsは、型を使用してストリーミングしますApr 30, 2025 am 08:22 AMnode.jsは、主にストリームのおかげで、効率的なI/Oで優れています。 ストリームはデータを段階的に処理し、メモリの過負荷を回避します。大きなファイル、ネットワークタスク、リアルタイムアプリケーションの場合。ストリームとTypeScriptのタイプの安全性を組み合わせることで、パワーが作成されます
Python vs. JavaScript：パフォーマンスと効率の考慮事項Apr 30, 2025 am 12:08 AMPythonとJavaScriptのパフォーマンスと効率の違いは、主に以下に反映されています。1）解釈された言語として、Pythonはゆっくりと実行されますが、開発効率が高く、迅速なプロトタイプ開発に適しています。 2）JavaScriptはブラウザ内の単一のスレッドに限定されていますが、マルチスレッドおよび非同期I/Oを使用してnode.jsのパフォーマンスを改善でき、両方とも実際のプロジェクトで利点があります。
JavaScriptの起源：その実装言語の調査Apr 29, 2025 am 12:51 AMJavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 2。JavaScriptのメモリ管理とパフォーマンスの最適化は、C言語に依存しています。 3. C言語のクロスプラットフォーム機能は、さまざまなオペレーティングシステムでJavaScriptを効率的に実行するのに役立ちます。
舞台裏：JavaScriptをパワーする言語は何ですか？Apr 28, 2025 am 12:01 AMJavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1）解析段階で抽象的構文ツリー（AST）を生成します。 2）ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3）実行段階でコンパイルされたコードを実行します。
PythonとJavaScriptの未来：傾向と予測Apr 27, 2025 am 12:21 AMPythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。
Python vs. JavaScript：開発環境とツールApr 26, 2025 am 12:09 AM開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
メモ帳++7.3.1
使いやすく無料のコードエディター
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
ドリームウィーバー CS6
ビジュアル Web 開発ツール
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
ホットトピック
7921
15165214141152130325124829