title: How to fix HTML file comments not being ignored by Webpack Dev Server?
body: <p>I have a <code>webpack</code> (v3.5.6) build using <code>html-loader</code> and processing multiple HTML files into themselves, embedding smaller images into HTML using <code>url-loader</code>.  The config works perfectly fine for building, but fails when using <code>Webpack Dev Server</code> (v2.7.1), since <code>Webpack Dev Server</code> doesn't seem to ignore comments in source HTML files.  It tries to require resources from commented sections of HTML and some of those resources don't exist at this time.</p>
  
  <p>Here is a sample error from <code>Webpack Dev Server</code>:</p>
  
  <pre>
  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
  </pre>
  
  <p>My (unfinished) <code>webpack</code> config is below:</p>
  
  <p><strong>webpack.common.js</strong>:</p>
  
  <pre>
  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'])
    ],
  };
  </pre>
  
  <p><strong>webpack.dev.js</strong>:</p>
  
  <pre>
  const merge = require('webpack-merge');
  
  const common = require('./webpack.common.js');
  
  module.exports = merge(common, {
    devServer: {
      contentBase: './dist'
    },
  });
  </pre>
  
  <p><strong>webpack.prod.js:</strong></p>
  
  <pre>
  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'
      })
    ]
  });
  </pre>
  
  <p><strong>entry.js:</strong></p>
  
  <pre>
  require('./about-us.html');
  require('./index.html');
  require('./css/style.css');
  require('./js/sidebar.js');
  </pre>