のWebPACK

Question

での編集HTML /ヒスイのファイルはこれが、私ドン私はあなたに私は問題だと思う部分を示すよ、私は私のwebpack.config.js

const common = { 
    entry: { 
    style: PATHS.style, 
    app: PATHS.jsComp 
    }, 
    output: { 
    path: PATHS.build, 
    filename: '[name].js' 
    }, 
    module: { 
    loaders: [ 
     { test: /\.jade$/, loader: "jade" } 
    ] 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     title: 'Webpack demo', 
     template: PATHS.template, // Load a custom template (ejs by default but can be changed) 
    inject: 'body' // Inject all scripts into the body (this is the default so you can skip it) 
    }) 
    ] 
}; 

を持っているコードの一部である場合、ブラウザのリロードを取得する方法コード全体が必要だと思っていますが、基本的にはこれを少し修正したものです。git file

webpack-dev-serverを実行するとすべてが機能します。 JavaScriptとSASSの変更によってブラウザがリロードされますが、jadeファイルで変更すると、ブラウザはリロードされません。私はヒスイのファイルに変更を加えたとき、私はwebpack-dev-server

webpack-dev-server 
webpack-dev-server --inline --hot 
webpack-dev-server --inline --hot --colors 
webpack-dev-server --inline --hot --colors --content-base app 
webpack-dev-server --inline --hot --colors --content-base app --host 0.0.0.0 
webpack-dev-server --inline --hot --colors --host 0.0.0.0 

のこれらのバリエーションを実行しようとしているの端末では上記の6つのバリエーションのいずれもが、ブラウザのリロードを取得していません。

また、私が正しく覚えていれば、（この設定を見つける前に）すべてのチュートリアルの後に、ブラウザがhtmlに変更されたことはありません。

は私が documentationによると（グローバルにまたはそれ以外）

Answer 1

をインストールする必要がある何か他のものがあり、あなたは3つの事を実行する必要があります。

• はWebPACKの構成にエントリポイントを追加します。 webpack/hot/dev-server。
• 新しいwebpack.HotModuleReplacementPlugin（）をwebpack設定に追加します。
• add hot：webpack-dev-server設定にtrueを指定すると、サーバー上でHMRが有効になります。

は、私の知る限り見るように、私はあなたがすでにやったこれらの3の唯一の事はhot: trueを使用していると思います。私はGulp経由でwebpack-dev-serverを実行するので、私の設定はコマンドライン引数ではなくJSオブジェクトにとどまります。

は試してみてください、この：

import webpack from 'webpack'; 

const common = { 
    entry: { 
    style: PATHS.style, 
    app: [ 
     PATHS.jsComp, 
     'webpack/hot/dev-server', `webpack-dev-server/client?http://localhost:3000` 
    ] 
    }, 
    output: { 
    path: PATHS.build, 
    filename: '[name].js' 
    }, 
    module: { 
    loaders: [ 
     { test: /\.jade$/, loader: "jade" } 
    ] 
    }, 
    devServer: { 
    hot: true 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new HtmlWebpackPlugin({ 
     title: 'Webpack demo', 
     template: PATHS.template, // Load a custom template (ejs by default but can be changed) 
    inject: 'body' // Inject all scripts into the body (this is the default so you can skip it) 
    }) 
    ] 
}; 

編集：

コメントで議論した後、私は私の答えはあなたのケースに対処していないと思います。私はあなたが何かの翡翠モジュールの後にアプリケーションをリロードしようとしていたと思っています（例えば、いくつかのAngularJSコンポーネントが玉ファイルからimportを使ってJavascriptテンプレート文字列をJadeファイルから読み込んでいました）しかし、判明したように、あなたのベースHTML（よく、玉、ただしあなたのページのベース）ファイルが変更されたときにリロードしようとしています。

最新のJavascriptフレームワーク（React、Angularなど）を使用している場合、基本HTMLは非常に小さく、実際はJavascriptで発生します。

とにかく、webpack-dev-serverやhtml-webpack-pluginのどちらでも現在サポートされていないと思います。