How to fix HTML file comments not being ignored by Webpack Dev Server? -

i have webpack (v3.5.6) build using html-loader , processing multiple html files themselves, embedding smaller images html using url-loader. config works fine building, fails when using webpack dev server (v2.7.1), since webpack dev server doesn't seem ignore comments in source html files. tries require resources commented sections of html , of resources don't exist @ time.

here sample error 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 

my (unfinished) webpack config below:

webpack.common.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'])   ], }; 

webpack.dev.js:

 const merge = require('webpack-merge');  const common = require('./webpack.common.js');  module.exports = merge(common, {   devserver: {     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'     })   ] }); 

entry.js:

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