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