Webpack2 的無腦友好錯誤提示工具

你只須要一行就能夠實現hot-reload和友好的錯誤提示

new WebpackBrowserLog(webpackConfig)

這裏有張gif的效果圖，請等待

gif

平時咱們都在瀏覽器的console面板裏看錯誤，或者是在命令行裏看錯誤真是太累了！瀏覽器直接顯示錯誤極大的提高了開發的效率！

不久前研究webpack2，順便產出了一個這樣的小工具。好吧，其實很早之前就有了，在下只是封裝了下webpack-dev-middlewar和webpack-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兩種配置的差別。