今回は webpack+dev+server の使い方を詳しく説明します。 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"
}
}ここでは、ソース ファイルを app フォルダーの下に置き、webpack を使用してビルドの下に Bundle.js にパッケージ化されています。
注: webpack-dev-server は独立した NPM パッケージであり、npm install webpack-dev-server を通じてインストールできます。
基本ディレクトリ
webpack-dev-server は現在のディレクトリを指定しない限り、デフォルトではベース ディレクトリになります。
webpack-dev-server --content-base build/
上記のコマンドはコマンド ラインで実行され、ビルド ディレクトリがルート ディレクトリとして使用されることに注意してください: 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 のクライアント エントリを追加します) -サーバーをバンドルに)
どちらのモードもホット モジュール置換をサポートしています。ホット モジュール置換の利点は、ページの再読み込みではなく、更新された部分のみが置換されることです。
iframe モード
このモードの使用には追加の設定は必要ありません。 , 次の URL 形式でアクセスするだけです
http://«host»:«port»/webpack-dev -server/«path»
例: http://localhost:8080/webpack-dev-server /index.html.
インライン モード
インライン モードでは、アクセスする URL を変更する必要はありません。これを有効にします。 2 つのモードがあります:
1 コマンド ラインから webpack-dev-server を起動する場合、以下が必要です
--inline コマンドをコマンドラインに追加します
webpack.config.js に devServer:{inline:true} を追加します
2 で webpack-dev-server を起動するときNode.js API では、次の 2 つのことも行う必要があります:
webpack-dev-server の設定にインライン オプションがないため、 webpack-dev-server/client?http://« を追加する必要があります。 path»:«port»/ を webpack 設定のエントリ エントリ ポイントに追加します。
は、
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
