Friendly-Errors-Webpack-Plugin

透過這個 Plugin 可以讓 Webpack Bundle 時發生的錯誤，透過比較友善清晰的方式顯示出來。
使用方式如下：

先安裝 Plugin

npm i friendly-errors-webpack-plugin -D

設定檔調整如下

webpack.common.js

var FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
module.exports = {
  plugins: [
    new FriendlyErrorsWebpackPlugin()
  ]
}

設定非常簡單，來看看官網的截圖效果

打包成功

打包失敗

也可以自定義一些成功訊息

webpack.common.js

var FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
module.exports = {
  plugins: [
    new FriendlyErrorsWebpackPlugin({
    compilationSuccessInfo: {
      messages: ['Application is running here http://localhost:3000'],
      notes: ['Bundle Success!']
    })
  ]
}

詳細使用方式請看這裡

Error-Overlay-Webpack-Plugin

當頁面出錯時，這個 Plugin 能清楚的秀出頁面上的錯誤程式碼位置，有利於開發階段的除錯。

實際使用畫面



先安裝 Plugin

npm i error-overlay-webpack-plugin -D

設定檔調整如下

webpack.common.js

var ErrorOverlayPlugin = require('error-overlay-webpack-plugin')
module.exports = {
  plugins: [
    new ErrorOverlayPlugin()
  ]
}

這樣就能正常使用囉，一般來說只會應用在開發階段，Production 記得要拿掉喔。

詳細使用方式請看這裡