web-dev-qa-db-ja.com

webpack-dev-serverホットリロードが機能しない

私のファイル構造は次のとおりです。

dist
  css
    style.css
  index.html
  js
    bundle.js
src
  css
    style.css
  index.html
  js
    main.js
node_modules
webpack.config.js
package.json

私のwebpack.config.jsは次のようになります。

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: __dirname,
        filename: './dist/js/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue'
            }
        ]
    }
};

走る：

webpack-dev-server --content-base dist --hot

そして、ビルドされ、機能しているように見えます。 localhost：8080は期待される結果を表示しますが、ホットリロードは機能しません。ファイルを変更すると、ターミナルで再構築が行われていることがわかりますが、ブラウザでは何も起こりません。設定に何か不足していますか？

javascriptnode.jswebpackvue.js
16
riccardolardi

webpack-dev-serverを使用すると、すべてのファイルが内部でビルドされ、は出力パスに吐き出されません。 webpackを単独で、devサーバーなしで実行すると、実際のディスクへのコンパイルが行われます。 devサーバーはメモリ内のすべてを実行し、再コンパイルを大幅に高速化します。

ホットリロードの問題を修正するには、コンテンツベースをソースディレクトリに設定し、 inline-mode を有効にします

そのようです：

webpack-dev-server --content-base src --hot --inline
18
Mario Tacke

私のために働いたのは、<script src="bundle.js">および<script src="dist/bundle.js">私のindex.htmlファイル。

// index.html
<script src="bundle.js"></script>      // works
<script src="dist/bundle.js"></script> // doesn't work!

dist/bundle.jsは、webpackを使用してビルドするだけで出力ファイルが完全に機能するためです。ただし、webpack-dev-server、ファイルシステムに既に存在する静的ファイルは引き続き提供され、最新のホットリプレースメントではありません。そうみたいです webpack-dev-serverを見ると混乱するdist/bundle.jsはhtmlファイルに含まれており、webpack.config.jsはそのパスに設定されます。

22
fafaro

このページのオプションはどれも役に立たなかった。 devServerセクションを次のように変更した後：

devServer: {
    port: 8080,
    contentBase: ['./src', './public'], // both src and output dirs
    inline: true,
    hot: true
},

動いた。

2
Nelson Teixeira

--inline --hotは私にとって問題ではありませんでした

Reduxを使用している場合、これを試すことができます。

何らかのランダムな理由で、_redux-devtools_がホットリロードを許可していませんでした。ルートコンポーネントと_redux compose_ configから削除してみてください。

注：ストア構成で次の構成を使用してredux devtoolブラウザー拡張機能を使用します：window.devToolsExtension ? window.devToolsExtension() : f => f

また、必ずお読みください： https://medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96#.ejpsmve8f

またはホットリロード3を試してください：例： https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915

1
Priyanshu Chauhan

Webpackのホットリロードも機能しなくなりました。私にとっての解決策は、node_modulesフォルダーを削除し、すべての依存関係を新規インストールすることでした。端末でnode_modulesの親フォルダーを開き、npm installを実行するだけです

1
Tom

100％実用的なソリューション

3つの手順に従うだけで、期待どおりにホットリロードが行われます

  1. Webpack configの「出力」プロパティに「publicPath」キーを含めます。 「publicPath」にはbundle.jsファイルへのパスを含める必要があります。これにより、dev-serverはbundle.jsファイルに変更があるかどうかを認識し、アプリケーションをリロードします。

設定は次のようになります-

output: {
   path: __dirname,
   publicPath:"/dist/js/",
   filename: './dist/js/bundle.js'
}
  1. 設定ファイルに「devServer」オプションを追加-
devServer:{
   contentBase:"/src/",
   inline:true,
   stats:"errors-only"
}

contentBaseは、スクリプトタグを含むindex.htmlファイルを置くパスを指す必要があることに注意してください。 」

  1. 最後に、index.htmlの「script」タグの「src」属性が、「 http：// localhost：port 」で始まるbundle.jsを指すことを確認する必要があります-

<script src="http://localhost:portnumber + value in publicPath + bundle.js"></script>

あなたの場合、それはこのようになります-

<script src="http://localhost:8080/js/dist/bundle.js" type="text/javascript"></script>

そして最後に覚えて_webpack-dev-server doesn't compile your js file or make build or watch on your jsファイルを実行して、jsファイルを監視するためにメモリ内のすべてを管理しますwebpack --watch別ウィンドウで

0
Jay Bidwai

以下のエラーがある場合はコンソールログを確認し、webpack devサーバーファイルにcorsを追加します

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin react hot reload

あなたの開発サーバーjsに以下のエントリを追加することが理想的です

headers: { "Access-Control-Allow-Origin": "*" },
0
Shadab Ahmed

これを試して：

package.jsonファイルで、scriptsオブジェクトの下にある"test" "echo \"Error: no test specified\" && exit 1"を含む行を削除し、次のものに置き換えます。

...
"scripts": {
    "start": "webpack-dev-server --hot"
  },

...

次に、プロジェクトを再起動するには、npm startを使用します。

この問題に遭遇したとき、これは私のために働いた。

編集：package.jsonファイルを共有できますか？

これもwebpack.config.jsに追加してみてください

devServer: {
  inline: true,
  port: 3000,
  hot: true
},
0
hammerabi