検索

ホームページ  >  記事  >  ウェブフロントエンド  >  webpack+dev+serverの使い方の詳しい説明

webpack+dev+serverの使い方の詳しい説明

php中世界最好的语言
php中世界最好的语言オリジナル
2018-06-11 15:50:581715ブラウズ

今回は 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 つのモードをサポートしています。

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

  2. インライン モード (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 を起動する場合、以下が必要です

  1. --inline コマンドをコマンドラインに追加します

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

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

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

  2. は、