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)
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent