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

Question

I have a webpack (v3.5.6) build using html-loader and processing multiple HTML files into themselves, embedding smaller images into HTML using url-loader. The config works perfectly fine for building, but fails when using Webpack Dev Server (v2.7.1), since Webpack Dev Server 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.

Here is a sample error from 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 is 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');

Diego Francisco Diego Francisco · Accepted Answer · 2018-01-01T09:49:33

You must activate comment minification in the config of html-loader.

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

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

1 Answers