webpack-dev-serverとhtml-webpack-pluginを使用してindex.htmlを見る方法

Question

webpack-dev-serverをhtml-webpack-pluginで開発して、リビジョンソースのindex.htmlを生成しました。私がindex.htmlを変更するたびに、バンドルシステムは再構築されません。私はインデックスがエントリにないことを知っているが、これを解決する方法はありますか？

Answer 1

問題は、index.htmlがWebpackによって監視されていないことです。コード内のどこかで「必要」または「インポート」されているローダーがテストしているファイルのみを監視します。

溶液には2つの部分があります。

最初は、エントリポイントにindex.htmlファイルが必要です。技術的には、アプリケーションのどこにでもそれを要求できますが、これは非常に便利です。 html-webpack-pluginでテンプレートを使用している場合は、テンプレートを要求することもできます。

私は私のエントリポイントである私のindex.jsファイル、で私のindex.htmlを要求さ：

最後に

require('./index.html') 
const angular = require('angular') 
const app = angular.module('app', []) 
//...so on and so forth 

、あなたのWebPACKの設定に、あなたの他のローダーの全てでraw-loaderをインストールして追加ファイル。したがって：

{ 
    test: /\.html$/, 
    loader: "raw-loader" 
} 

生ローダは単なるテキストの文字列に「必要」された任意のファイルについて変換されますと、その後、WebPACKのはあなたのためにそれを見て、DEV-サーバーに変更を加えるたびに更新されます。

Webpack自体も、あなたのプログラムも、ロードされた段階でindex.htmlファイル（またはテンプレート）で実際に何もしません。それは私が開発サーバを実行している場合ので、ちょうど良い対策のために、私はそれを追加し、本番やテスト環境のための完全に不要です。

/* eslint no-undef: 0 */ 

if (process.env.NODE_ENV === 'development') { 
    require('./index.html') 
} 

const angular = require('angular') 
const app = angular.module('app', []) 
//...so on and so forth 

理論的にはあなたが他の静的なHTMLの束「に必要」することができますあなたが見たいファイルです。 ...またはその問題のテキストファイル。私はAngularディレクティブテンプレートにはrawローダーを使用しますが、エントリーポイントの先頭に追加する必要はありません。

module.exports = function(app) { 
    app.directive('myDirective', function(aListItem) { 
    return { 
     template: require('./myTemplate.html'), 
     restrict: 'E', 
     controller: function($scope) { 
     $scope.someThingThatGoesInMyTemplate = 'I love raw-loader!' 
     } 
    } 
    }) 
} 

Answer 2

単にあなたのdevServerの設定にwatchContentBase: trueを追加します。これは次のように私は、ディレクティブのテンプレートプロパティの内部で必要とすることができます。 webpack-dev-serverはcontentBase dirにあるすべてのファイルの変更を監視します。ここでは、./src内のすべてのファイルが

webpack.config.js見る：

... devServer: { port: 8080, contentBase: './src', watchContentBase: true }