最近在使用webpack重新搭建项目,在启动了webpack之后发现在终端输出了很多信息,看着很别扭,效果如下:
于是参考了vue-cli的配置,使用FriendlyErrorsWebpackPlugin插件来解决这个问题
首先,安装插件
npm i -D friendly-errors-webpack-plugin node-notifier
然后,配置wecpack
// webpack.config.js
const utils = require('./utils'); //工具
const config = require('../config'); // webpack运行环境配置,可自行设置
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
module.exports = {
// ...
devServer: {
// ...
quiet: true, // 如果使用webpack-dev-server,需要设为true,禁止显示devServer的console信息
},
plugins: [
// ...
new FriendlyErrorsWebpackPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: ${config.dev.https ? 'https' : 'http'}://${config.dev.host}:${config.dev.port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined,
clearConsole: true,
}),
],
}
再运行webpack,效果如下
完美!现在干净多了!
另外,还可以利用 webpack-dev-server 的 overlay 配置选项可以在编译出现错误时,将错误直接显示在页面上。
devServer: {
// ...
overlay: true, // 编译出现错误时,将错误直接显示在页面上
},
效果如下: