ローカルサーバーを構築するためのwebpack-dev-serverの実装

序文

webpackを使用してパッケージ化すると、コードを少し更新するたびに再パッケージ化する必要があるため、非常に面倒です。ローカルにサーバーを構築し、新しいコードを作成して自動的に検出されるようにしたいと考えています。このとき、webpack-dev-serverを使用する必要があります。

webpack-deb サーバー

Webpack はオプションのローカル開発サーバーを提供します。このローカルサーバーは node.js 上に構築され、内部で express フレームワークを使用しているため、ブラウザーの自動更新を実現し、必要な変更された結果を表示できます。

これは別のモジュールなので、使用する前にインストールする必要があります。コマンドは次のとおりです。

npm インストール -D webpack-dev-server

インストールが完了したら、webpack でも設定する必要があります。設定の対象は devServer で、これにも多くのプロパティがあります。よく使用されるプロパティは次のとおりです。

contentBase: ローカルサービスを提供するファイルはどれですか? デフォルトはルートファイルです。ここでは./distと入力する必要があります。
port: ポート番号、デフォルトは 8080
インライン: ページはリアルタイムで更新されます
historyApiFallBack: SPA（シングルページアプリケーション）ページでは、HTML5 履歴モードを使用します。

webpack.config.js の構成は次のとおりです。

モジュール.エクスポート = {
   開発サーバー: {
        コンテンツベース: "./dist",
        インライン: true、
    },
}

次に、package.json ファイルにスクリプトコマンドを追加しましょう。

「スクリプト」: {
    "dev": "webpack サーブ"
  },

devは開発環境を表し、上記の構成は完了です

webpack-dev-server 起動エラー

次に、npm run dev コマンドを開始すると、プログラムは次のエラーを報告します。

エラー: モジュール 'webpack-cli/bin/config-yargs' が見つかりません

理由はwebpack-cliのバージョンの問題です。まずは下記のバージョンを見てみましょう。

"webpack": "^5.44.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"

解決策1

webpack-cliのバージョンを4から3に下げる

1. webpack-cliをアンインストールする

npm アンインストール webpack-cli

2. webpack-cli@3をインストールする

npm インストール webpack-cli@3 -D

起動時にエラーは報告されませんが、これは一時的な解決策にすぎません。2番目の解決策をお勧めします。

解決策2

スクリプトの設定を変更し、元のwebpack-dev-serveをwebpack serveに変更します。

「スクリプト」: {
    "dev": "webpack サーブ --open --mode 開発"
},

最後に、ターミナルで npm run dev と入力して通常どおり起動すると、パラメータ --open を追加したので Web ページが自動的に開きます。手動で開きたい場合は、--open を削除するだけです。

港湾占拠問題を解決する

すでにvue+webpackでプロジェクトを開始しているが、npm run devを再度実行すると、次のエラーが報告されます。

エラー: listen EADDRINUSE: アドレスはすでに使用中です 127.0.0.1:8080

理由は、前回開始したデフォルトのポートが 8080 だったためです。今回プロジェクトを再度開始すると、ポートはまだ 8080 ですが、ポート 8080 はすでに使用されています。解決策としては、ポート 8080 に対応する PID プロセス番号を強制終了するだけで済みます。

まずポート8080に対応するプロセスIDを見つけます

lsof -i:8080

対応する PID を見つけたら、kill コマンドを使用してそれを強制終了します。

kill -9 PID プロセス番号

webpack-dev-server を使ったローカルサーバーの構築に関する記事はこれで終わりです。webpack-dev-server を使ったローカルサーバーの構築についての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: