Webpack2 的无脑友好错误提示工具

2,256 阅读1分钟

你只需要一行就可以实现hot-reload和友好的错误提示

new WebpackBrowserLog(webpackConfig)

这里有张gif的效果图,请等待

gif

平时我们都在浏览器的console面板里看错误,或者是在命令行里看错误真是太累了!浏览器直接显示错误极大的提升了开发的效率!

不久前研究webpack2,顺便产出了一个这样的小工具。好吧,其实很早以前就有了,在下只是封装了下webpack-dev-middlewarwebpack-hot-middleware而已,然后可以很便捷的调用。如下

const WebpackBrowserLog = require('webpack-browser-log'); // 引入webpack-browser-log
const merge = require('webpack-merge'); // 引入webpack-merge
const webpackDev = require('./webpack.dev'); // 引入你webpack.dev的配置
const base = require('./webpack.base'); // 引入你webpack base的配置
const webpackConfig = merge(base,webpackDev); // 合并两配置

//重点在下 ---------
new WebpackBrowserLog(webpackConfig); // 默认只需要传入需要启动的webpack配置就OK了
//重点在上 ---------

剩下的还是直接看github的readme吧!希望你喜欢!

github.com/MeCKodo/web…

文章首发于www.meckodo.com

下一篇,我们将会介绍webpack两种配置的差异。