webpack-dev-serverの使い方は何ですか？

2年 ago
桜, 春樹
1 minute

webpack-dev-serverは、Node.jsベースの開発サーバーであり、開発中にリアルタイムのホットリロードと自動リフレッシュ機能を提供します。ファイルの変更を監視し、ファイルが変更された際に再コンパイルしてページを更新することで、開発効率を向上させることができます。

webpack-dev-serverを使う手順は次の通りです：

  1. プロジェクトのルートディレクトリで、npm install webpack-dev-server –save-dev コマンドを実行して、webpack-dev-serverをインストールしてください。
  2. webpackの設定ファイルでdevServerオプションを設定します。
module.exports = {
  // ...其他配置项
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'), //指定服务的根目录
    port: 8080, //指定服务端口号
    hot: true, //启用热更新
    open: true, //自动打开浏览器
  },
};
  1. package.jsonファイルに起動スクリプトを追加してください。
{
  "scripts": {
    "start": "webpack-dev-server --config webpack.config.js",
    //...
  }
}
  1. 実行: npm start

webpack-dev-serverを起動すると、プロジェクトのコードがコンパイルされ、メモリにバンドルされ、指定したポート番号でローカルサーバーが起動します。ブラウザから http://localhost:8080 にアクセスすると、プロジェクトの実行結果が表示されます。コードが変更されると、webpack-dev-serverは自動的に再コンパイルし、変更部分をブラウザにリアルタイムで更新するため、ページを手動で更新する必要はありません。

Webpack-dev-serverには、プロキシや404ページのカスタマイズなど、他にもさまざまなオプションが用意されており、具体的な要件に応じて設定することができます。

bannerAds