webpack使用friendly-errors-webpack-plugin和stats配置終端輸出日志

在vue-cli中。如果啟動項目或者打包成功后會在終端輸出綠色的日志。報錯會輸出紅色的日志。警告會輸出黃色的日志。

在webpack中使用friendly-errors-webpack-plugin這個插件就能實現相同的配置。

配置webpack

\\webpack.config.js
const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");

module.exports = {
    ---
    plugins: [
        new FriendlyErrorsWebpackPlugin(), //使用插件
    ],
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        port: 9000,
        hot: true,
        stats: "errors-only",  // 啟動項目配置終端輸出日志
    },
    devtool: "source-map",
    stats: "errors-only", // 項目打包配置終端輸出日志
    ---
}

stats配置參考:https://www.webpackjs.com/configuration/stats/#stats

friendly-errors-webpack-plugin參考:https://www.npmjs.com/package/friendly-errors-webpack-plugin