複習webpack4之EsLint配置

以前學習過webpack3的知識，可是webpack4升級後仍是有不少變更的，因此此次從新整理一下webpack4的知識點，方便之後複習。

此次學習webpack4不單單要會配置，記住核心API，最好還要理解一下webpack更深層次的知識，好比打包原理等等，因此可能會省略一些比較基礎的內容，可是但願我能夠經過這次學習掌握webpack，更好地應對之後的工做。

1.使用EsLint約束代碼

首先要安裝EsLint。

cnpm install -D eslint
複製代碼

而後生成一個配置文件。

npx eslint --init
複製代碼

咱們能夠經過這行命令來檢測咱們src中代碼是否符合規範。

npx eslint src
複製代碼

若是有不少報錯，咱們每一行都讀報錯，每個文件去修改，會變得很麻煩，因此咱們能夠利用vscode裝一個插件，eslint這個插件。這樣編輯器就會自動幫咱們把不合規範的代碼標紅。

有時候咱們不想遵循某個規則，能夠經過rules跳過這條規則。

編輯器會提示咱們，這是依據哪一條規則提示報錯，咱們就能夠拷貝這條規則，在rules配置一下。

這樣就不會在報紅了。

若是在某些規則中，不能使用document，須要在.eslintrc.js中增長一個配置。

2.webpack中配置EsLint

首先要安裝一個loader。

cnpm install eslint-loader -D
複製代碼

而後對js文件用eslint-loader

而後在devServer中增長一個配置項。

這樣咱們在開發過程當中，若是有代碼不符合規範，就會直接在瀏覽器上加一個蒙層，顯示報錯信息。

在檢測過程當中，若是存在一些淺顯的問題，咱們能夠經過增長一個配置項自動修復。

eslint-loader必須在打包前執行，因此loader順序是不能錯的，若是怕順序發生錯誤，能夠加上force: 'pre'，保證eslint-loader加載順序。

相似的配置項還有不少，能夠對照文檔再深刻了解。

3.git提交檢測

在webpack中配置Eslint會影響打包速度，因此咱們還能夠經過git提交代碼時，觸發鉤子，進行eslint檢測。

不過這種方式就沒有辦法在瀏覽器中「可視化」錯誤代碼了，若是有須要能夠查一下對應文檔。