webpack之構建日誌

當我們執行構建命令時候，會出現如下效果：

事實上，很多時候我們並不關注這些，只關注是否構建成功和錯誤信息。下面我們就一起來解決這個需求，讓我們的命令行清爽整潔

不依賴插件

通過在webpack.config.js中設置stats

統計信息stats

•       errors-only 只在發生錯誤時輸出
•       minimal  只在發生錯誤或有新的編譯時輸出
•       none  沒有輸出
•       normal  標準輸出
•       verbose  全部輸出

只是通過這種方式來設置，當我們構建成功後，命令行什麼都沒有輸出，對我們不太友好。下面我們就通過插件來優化日誌

通過插件實現優化

1. 安裝  cnpm i friendly-errors-webpack-plugin -D
2. 配置：

   //部分代碼省略
   const FriendlyErrorsWebpackPlugin=require('friendly-errors-webpack-plugin');
   
   plugins:[
      new FriendlyErrorsWebpackPlugin()
   ],
   stats:"none"

    

3. 構建打包，我們可以看到我們的命令行。成功後顯示  Compiled successfully in 482ms   ，並以綠色顯示