webpack+dev+serverの使い方の詳しい説明-jsチュートリアル-php.cn

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