webpackは、オプションのローカル開発サーバーを提供しますwebpack-dev-server。このローカルサーバーはnode.jsに基づいており、内部でExpressフレームワークを使用します。これにより、ブラウザーで変更された結果を自動的に更新して表示することができます。
最初のステップ：インストール
これは別のモジュールであり、使用する前にインストールする必要があります。
インストール：npm install --save-dev [email protected]
私が使用しているwebpackのバージョンは3.6.0で、webpack-dev-serverのバージョンは2.9.0です。
ステップ2：構成
インストール後、webpack.config.jsファイルdev-server構成を追加する必要があります。
オプション自体は、次の属性を設定できます。
- contentBase：ローカルサービスを提供するフォルダーをここに入力します
./dist - ポート：ポート番号、デフォルトは8080です
- インライン：ページをリアルタイムで更新するかどうかを制御します。値はtrueまたはfalseです。trueの場合、コードを変更するとページが自動的に更新されます。
- historyApiFallback：SPAページで、HTML5の履歴モードに依存します
// webpack.config.js
//...
module.exports = {
// ...其它配置
devServer: {
contentBase:'./dist',
inline:true,
}
}
ステップ3：使用する
この時点で、terminalwebpack-dev-serverコマンドを直接入力すると、誤ったレポートが見つかりました。このコマンドを見つけてください。
理由：コマンドを直接cmdから入力するか、エディターのターミナルから入力するかに関係なく、上記のように、グローバルでコマンドを検索して実行します。ただし、webpack-dev-serverはローカルにインストールされているため（--save-dev代わりに使用しているため-g）、グローバルで見つからない場合はエラーが報告されます。
解決策：package.jsonスクリプトファイルに、次のコマンドを追加します。
//package.json文件
"scripts": {
// ...其它命令
"dev": "webpack-dev-server --open" //--open表示执行完命令后自动打开浏览器
}
次に、そのnpm run devコマンドを使用します
スクリプトでコマンドを説明します。
npm run xxx時間を使用するときに定義されるコマンドスクリプトの一部です。package.jsonファイルスクリプトに移動して、実行するxxxコマンドを見つけます。次に、コマンドに対応する位置を特定の順序で探します。- まず、ローカル
node_modules/.binは対応するコマンドパスを見つけますか。見つからない場合は、グローバル環境変数で検索します。
予防
コードディレクトリ構造にdistフォルダーがなく、コンパイルされたファイルが表示されませんが、リアルタイムでコンパイルされたファイルがメモリに保存されるため、webpack-dev-serverを起動した後は正常に実行できます。 。