54

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

4

6 に答える 6

49

問題は、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

最後に、 raw-loaderを他のすべてのローダーと一緒にインストールして、Webpack 構成ファイルに追加します。したがって：

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

raw ローダーは、「必要な」ファイルをテキストの文字列に変換します。次に、Webpack がそれを監視し、変更を加えるたびに開発サーバーを更新します。

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-loader を使用していますが、それらをエントリ ポイントの先頭に追加する必要はありません。次のように、ディレクティブ テンプレート プロパティ内で require するだけです。

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!'
      }
    }
  })
}
于 2015-11-30T09:40:59.940 に答える