vue.js学習ノート21-webpack-dev-serverの一般的なコマンドと構成方法

1.コマンド構成方式1:webpack-dev-serverの後に直接パラメータを追加する(推奨方式)
1.コンパイル後に自動的にページを開く
--openで実現
たとえば、「dev」:「webpack-dev-server--open」
注意:packageを変更します.jsonファイルの後、webpack-dev-serverを再起動する必要があります
2.ポート番号の変更
--portで実現
たとえば、「dev」:「webpack-dev-server--open--port 6666」
3.デフォルトルートパスの設定
--contentBaseで実現
たとえば、「dev」:「webpack-dev-server--open--port 6666--contentBase src」
4.ホットアップデートの設定
-hotで実現
たとえば、「dev」:「webpack-dev-server--open--port 6666--contentBase src--hot」
注意:hotを設定しないと、コンパイルするたびにboundleが再生成されます.jsファイルは、ホット更新を開始すると、毎回boundleが生成する.jsファイルは、実行効率を向上させます.
2.コマンド構成方式2:パラメータ情報をプロファイルとしてwebpackに配置する.config.js中
Webpackでconfg.jsで、ノードdevServer構成オブジェクトを追加

devServer:{  //      dev-server     
         //  --open --port 6666 --contentBase src --hot
         open:true,  //        
         port:7777,  //      
         contentBase:'src',   //          
         hot:true             //      
     }

注意:この場合、webpack-dev-serverを起動するとエラーが発生します.hotホット更新を起動するのが面倒なので、多くのものを配置する必要があります.
1.devServerでhot:trueを構成する
2.webpackで必要です.config.jsにwebpackモジュールを導入
    const webpack = require('webpack');
3.devServerと平レベルの場所にプラグインpluginsを配置する必要がある

 plugins:[ //        
         new webpack.HotModuleReplacementPlugin()  // new           ，
     ]

注意:webpack-dev-serverでは、すべての接尾辞sのノードが1つの配列であり、vueではpropsだけが配列であり、その他はオブジェクトです.