webpack - HTMLファイルのコメントがWebpack Dev Serverによって無視されない問題を修正するには?

Question

複数の HTML ファイルを使用してそれ自体に処理するwebpack(v3.5.6) ビルドがあり、 . 構成はビルドには問題なく機能しますが、 (v2.7.1)を使用すると失敗します。これは、ソース HTML ファイルのコメントが無視されないように見えるためです。HTML のコメント セクションからリソースを要求しようとしますが、それらのリソースの一部は現時点では存在しません。html-loaderurl-loaderWebpack Dev ServerWebpack Dev Server

からのサンプル エラーを次に示しますWebpack Dev Server。

./about-us.html のエラー
モジュールが見つかりません: エラー: 'C:\Users\usr\dev\www' の './img/old-image.png' を解決できません
 @ ./about-us.html
 @ ./entry.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./entry.js

私の（未完成の）webpack設定は以下の通りです：

webpack.common.js :

const path = require('パス');
const webpack = require('webpack');

const CleanWebpackPlugin = require('clean-webpack-plugin');

const env = process.env.NODE_ENV;

module.exports = {
  エントリ: './entry.js',
  出力: {
    パス: path.resolve(__dirname, 'dist'),
    ファイル名: 'bundle.js'
  }、
  モジュール: {
    ルール: [{
        テスト: /\.html$/,
        使用する： [
          {
            ローダー: 'ファイルローダー',
            オプション: {
              名前: '[名前].[拡張子]',
            }、
          }、
          {
            ローダー: '抽出ローダー',
          }、
          {
            ローダー: 'html-ローダー',
            オプション: {
              属性: ['img:src'],
              補間：真、
            }、
          }、
        ]、
      }、
      {
        テスト: /\.js$/,
        除外: /(node_modules)/,
        使用する： {
          ローダー: 'babel-loader',
          オプション: {
            プリセット: ['env']
          }
        }
      }、
      {
        テスト: /\.css$/,
        使用: env === 'プロダクション' ?
          ExtractTextPlugin.extract({
            フォールバック: 'style-loader',
            使用: ['css-loader']
          }) : ['style-loader', 'css-loader']
      }、
      {
        テスト: /\.(png|jpg|gif|svg)$/,
        使用する： [{
          ローダー: 'url-loader',
          オプション: {
            制限: 8192,
            名前: '[パス][名前].[拡張子]'
          }
        }]
      }
    ]
  }、
  解決： {
    エイリアス: {
      'vue$': 'vue/dist/vue.common.js',
    }、
  }、
  プラグイン: [
    new CleanWebpackPlugin(['dist', 'build'])
  ]、
};

webpack.dev.js :

const merge = require('webpack-merge');

const common = require('./webpack.common.js');

module.exports = merge(common, {
  開発サーバー: {
    contentBase: './dist'
  }、
});

webpack.prod.js:

const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const common = require('./webpack.common.js');

module.exports = merge(common, {
  プラグイン: [
    新しいUglifyJSPlugin()、
    new ExtractTextPlugin({
      ファイル名: 'styles.css'
    }))
  ]
});

entry.js:

require('./about-us.html');
require('./index.html');
require('./css/style.css');
require('./js/sidebar.js');