ホームページ > 記事 > ウェブフロントエンド > webpack-dev-server_javascript スキルの簡単な使用方法の詳細な説明

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

不言オリジナル: 2018-04-03 09:36:421083ブラウズ

この記事では主に 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 設定のポイント
d141004d810ae36912d7298eeb68b32d2cacc6d41bbb37262a98f745aa00fbf0 を 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

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_javascript スキルの簡単な使用方法の詳細な説明

関連記事