Incorrect config, or something else?

[jennifert]

Should it run on built when the loader is configured? Or would it just work on calling npx htmlhint script.

The output of my npx webpack command (from build script) does not mention htmlhint,

I am not sure if this is an issue with how I configured, or if its not compatible with webpack 5 (or should just call in script)?

Node: v17.0.1
Npm: 8.1.0
webpack: 5.60.0
webpack-cli: 4.9.1
webpack-dev-server 4.4.0
mac-os: 12.0.1

Package.json:

  "scripts": {
    "lint:html": "npx htmlhint src/*.html",
    "build": "npx webpack --config webpack.config.dev.js"
    "dev": "npx webpack serve --live-reload --config webpack.config.dev.js",
  },
"devDependencies": {
    "@babel/cli": "^7.15.7",
    "@babel/core": "^7.15.8",
    "@babel/node": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "@babel/register": "^7.15.3",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.0",
    "htmlhint": "^0.15.2",
    "htmlhint-loader": "^1.3.1",
    "numeral": "^2.0.6",
    "style-loader": "^3.3.1",
    "stylelint": "^13.13.1",
    "stylelint-webpack-plugin": "^3.0.1",
    "webpack": "^5.60.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.4.0"
  }

.htmlhintrc:

{
  "tagname-lowercase": true,
  "attr-lowercase": true,
  "attr-no-duplication": true,
  "attr-value-double-quotes": true,
  "attr-unsafe-chars": true,
  "attr-no-unnecessary-whitespace": true,
  "attr-value-not-empty": false,
  "doctype-first": true,
  "tag-pair": true,
  "spec-char-escape": true,
  "src-not-empty": true,
  "title-require": true,
  "tag-self-close": false,
  "head-script-disabled": true,
  "alt-require": true,
  "doctype-html5": true,
  "inline-script-disabled": true,
  "inline-style-disabled":true,
  "id-unique": true,
  "id-class-ad-disabled": true,
  "id-class-value": "aaa-bbb",
  "style-disabled": true,
  "input-requires-label": true,
  "tags-check": true,
  "space-tab-mixed-disabled": true
}

webpack config:

const path = require('path');
var StyleLintPlugin = require('stylelint-webpack-plugin');

module.exports = {
    mode: "development",
    devtool: "eval-source-map",
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ["babel-loader"]
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                enforce: 'pre',
                test: /\.html/,
                loader: 'htmlhint-loader',
                exclude: /node_modules/,
                options: {
                    configFile: '.htmlhintrc'
                }
            }
        ]
    },
    output: {
        path: path.resolve(__dirname, 'src'),
        filename: "bundle.js",

        //enable clean on dist only. otherwise, it will delete all files and cannot recover.
        // clean: true, 
    },
    devServer: {
        static: {
            directory: path.join(__dirname, 'src'),
        },
        compress: true,
        port: 9000,
    },
    plugins: [
        new StyleLintPlugin({
            configFile: '.stylelintrc',
            failOnError: true,
            emitErrors: true,
            emitWarning: true
        }),
    ],
}

npm run build:

asset bundle.js 136 KiB [compared for emit] (name: main)
runtime modules 997 bytes 4 modules
modules by path ./node_modules/ 41.5 KiB
  modules by path ./node_modules/style-loader/dist/runtime/*.js 5.75 KiB 6 modules
  modules by path ./node_modules/css-loader/dist/runtime/*.js 2.94 KiB
    ./node_modules/css-loader/dist/runtime/sourceMaps.js 688 bytes [built] [code generated]
    ./node_modules/css-loader/dist/runtime/api.js 2.26 KiB [built] [code generated]
  ./node_modules/numeral/numeral.js 32.8 KiB [built] [code generated]
modules by path ./src/ 2.86 KiB
  ./src/index.js 125 bytes [built] [code generated]
  ./src/style.css 1.11 KiB [built] [code generated]
  ./node_modules/css-loader/dist/cjs.js!./src/style.css 1.63 KiB [built] [code generated]
webpack 5.60.0 compiled successfully in 1260 ms

npm run lint:html

Config loaded: /Users/jenn/GitHub/dev-starter-kit/.htmlhintrc

   /Users/jenn/GitHub/dev-starter-kit/src/index.html
      L11 |    <P></P>
               ^ The html element name of [ P ] must be in lowercase. (tagname-lowercase)
      L11 |    <P></P>
                  ^ The html element name of [ P ] must be in lowercase. (tagname-lowercase)

Scanned 1 files, found 2 errors in 1 files (17 ms)