Webpack学習(3)のwebpack-dev-serverは問題を自動的にリフレッシュできない
1326 ワード
Webpack-dev-serverでブラウザが自動的にリフレッシュできないという問題が発生しました.いろいろな答えを探して分かった.
次の点に注意してください.
1.webpack-dev-serverはあなたのwebpackを読み取ることはできません.config.jsの構成output!!
あなたはwebpackにいます.config.jsの中の配置output属性はあなたがwebpackでパッケージ化する時やっと役に立ち、webpack-dev-serverに対して役に立たない
2.webpack-dev-serverパッケージ生産のファイルはあなたのプロジェクトディレクトリに追加されません!!
デフォルトのパッケージのファイル名はbundleです.jsは、本当にあなたのプロジェクトディレクトリに表示されません.自分の環境に保存されていると推測されます.
自動リフレッシュの構成方法(inlineモード):
私が慣れている方法はプロジェクトのpackageです.jsonに追加
これでnpm startコマンドでinlineモードを起動できますが、webpack-dev-serverコマンドを具体的に入力することもできます
肝心なのはあなたのindexです.htmlつまりあなたのプロジェクトの入り口のhtmlファイルの中でこのbundleを引用します.jsファイルはルートディレクトリの下を直接参照する必要があります!
次の点に注意してください.
1.webpack-dev-serverはあなたのwebpackを読み取ることはできません.config.jsの構成output!!
あなたはwebpackにいます.config.jsの中の配置output属性はあなたがwebpackでパッケージ化する時やっと役に立ち、webpack-dev-serverに対して役に立たない
2.webpack-dev-serverパッケージ生産のファイルはあなたのプロジェクトディレクトリに追加されません!!
デフォルトのパッケージのファイル名はbundleです.jsは、本当にあなたのプロジェクトディレクトリに表示されません.自分の環境に保存されていると推測されます.
自動リフレッシュの構成方法(inlineモード):
私が慣れている方法はプロジェクトのpackageです.jsonに追加
"scripts": {
"start": "webpack-dev-server --inline --content-base ."
}
これでnpm startコマンドでinlineモードを起動できますが、webpack-dev-serverコマンドを具体的に入力することもできます
肝心なのはあなたのindexです.htmlつまりあなたのプロジェクトの入り口のhtmlファイルの中でこのbundleを引用します.jsファイルはルートディレクトリの下を直接参照する必要があります!
Webpack のbundleは できません.jsファイルディレクトリ、webpack のこのbundle.jsファイルは、 でwebpackをパッケージした にしか されません!
まとめてみると、webpackに されているbundleです.jsは でパッケージする があります.ディレクトリは で できます.Webpack-dev-server パッケージは のbundleである.js、パッケージパスはあなたのcontentBaseで めます!2つのファイルは います
:https://www.cnblogs.com/llauser/p/6795428.html