Webpack 如何修复网页包开发服务器未忽略的HTML文件注释？

我有一个

webpack

（v3.5.6），使用

html加载器构建，并将多个html文件处理到它们自己中，使用
url加载器将较小的图像嵌入html中。该配置在构建时运行良好，但在使用
Webpack Dev Server
（v2.7.1）时失败，因为
Webpack Dev Server
似乎不会忽略源HTML文件中的注释。它试图从HTML的注释部分获取资源，而其中一些资源目前不存在

以下是来自
Webpack Dev Server
的示例错误：

ERROR in ./about-us.html
Module not found: Error: Can't resolve './img/old-image.png' in 'C:\Users\usr\dev\www'
 @ ./about-us.html
 @ ./entry.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./entry.js
webpack.dev.js：

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

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

const env = process.env.NODE_ENV;

module.exports = {
  entry: './entry.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
        test: /\.html$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
            },
          },
          {
            loader: 'extract-loader',
          },
          {
            loader: 'html-loader',
            options: {
              attrs: ['img:src'],
              interpolate: true,
            },
          },
        ],
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      },
      {
        test: /\.css$/,
        use: env === 'production' ?
          ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['css-loader']
          }) : ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 8192,
            name: '[path][name].[ext]'
          }
        }]
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js',
    },
  },
  plugins: [
    new CleanWebpackPlugin(['dist', 'build'])
  ],
};
const merge = require('webpack-merge');

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

module.exports = merge(common, {
  devServer: {
    contentBase: './dist'
  },
});
const merge=require（'webpack-merge'）；
const common=require（'./webpack.common.js'）；
module.exports=合并（公共{
开发服务器：{
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, {
  plugins: [
    new UglifyJSPlugin(),
    new ExtractTextPlugin({
      filename: 'styles.css'
    })
  ]
});
require('./about-us.html');
require('./index.html');
require('./css/style.css');
require('./js/sidebar.js');
const merge=require（'webpack-merge'）；
const UglifyJSPlugin=require（'uglifyjs-webpack-plugin'）；
const ExtractTextPlugin=require（“提取文本网页包插件”）；
const common=require（'./webpack.common.js'）；
module.exports=合并（公共{
插件：[
新的UglifyJSPlugin（），
新的ExtractTextPlugin({
文件名：“styles.css”
})
]
});
entry.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, {
  plugins: [
    new UglifyJSPlugin(),
    new ExtractTextPlugin({
      filename: 'styles.css'
    })
  ]
});
require('./about-us.html');
require('./index.html');
require('./css/style.css');
require('./js/sidebar.js');
要求（'./about us.html'）；
要求（'./index.html'）；
要求（'./css/style.css'）；
要求（'./js/sidebar.js'）；
您必须在html加载程序的配置中激活注释缩小

module: {
  rules: [{
    test: /\.html$/,
    use: [ {
      loader: 'html-loader',
      options: {
        minimize: true,
        removeComments: true,
      }
    }],
  }]
}