概要
webpackでホットリロード時にstyelintを実行することで、早期にエラーを検知することが可能です。
前提条件
webpackの設定やstylelintはすでに設定済みの想定です。
github
動作確認済みのリポジトリ
https://github.com/TakuyaTaniguchi/staticDevelop
手順
npm-scripts
package.json
{
"scripts": {
"dev": "webpack-dev-server --mode development --watch"
}
}
stylelint-webpack-pluginのインストール
yarn add stylelint-webpack-plugin --dev
webpack.config.jsに設定を追加
webpack.config.js
const StyleLintPlugin = require('stylelint-webpack-plugin');
const STYLELINT = ['./src/**.scss'];//検知対象ファイルの設定 カンマ区切りで検知対象を追加できる。
-~~~~~~~~~~~~~~
//pluginsに設定を追加
plugins: [
new StyleLintPlugin({
files: STYLELINT,
syntax: 'scss'
}),
],
たったこれだけでホットリロード中の検知が可能になります。
※まだまだ初心者のため、 設定間違いや、処理に悪いところがあればコメントに頂ければと思います
参考資料:
https://gist.github.com/manavsehgal/69c2e0f0083df14010a638187654378e