web-dev-qa-db-ja.com

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

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

webpackwebpack-dev-server
50
elaijuh

問題は、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はそれを監視し、変更を加えるたびにdev-serverを更新します。

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!'
      }
    }
  })
}
44
Gabriel Kunkel

watchContentBase: trueをdevServerの設定に追加するだけです。 webpack-dev-serverは、contentBase dirにあるすべてのファイルの変更を監視します。ここでは、。/ src内のすべてのファイルを監視します

webpack.config.js：

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

}
26
B. Laskowski

別の解決策は、file-loaderを使用して、エントリjavascriptファイルでhtmlファイルをインポートすることです。

import 'file-loader!../templates/index.html';

通常通りhtml-webpack-plugin設定を使用できます

plugins: [
 new HtmlWebPackPlugin({
  template: path.resolve(__dirname, 'src/templates/index.html'),
  filename: path.resolve(__dirname, 'dist/index.html'),
  files: {
   css: ['style.css'],
   js: ['main.js'],
  }
 })
]

webpack-dev-serverが実行されている場合、これはディスクに何も書き込みません

0
ibex