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

cucumber 發(fā)布于2019-08-20 14:39 / 1932人閱讀

摘要：你只需要一行就可以實現(xiàn)和友好的錯誤提示這里有張的效果圖，請等待平時我們都在瀏覽器的面板里看錯誤，或者是在命令行里看錯誤真是太累了瀏覽器直接顯示錯誤極大的提升了開發(fā)的效率不久前研究，順便產(chǎn)出了一個這樣的小工具。

你只需要一行就可以實現(xiàn)hot-reload和友好的錯誤提示
new WebpackBrowserLog(webpackConfig)

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

平時我們都在瀏覽器的console面板里看錯誤，或者是在命令行里看錯誤真是太累了！瀏覽器直接顯示錯誤極大的提升了開發(fā)的效率！

不久前研究webpack2，順便產(chǎn)出了一個這樣的小工具。好吧，其實很早以前就有了，在下只是封裝了下webpack-dev-middlewar和webpack-hot-middleware而已，然后可以很便捷的調(diào)用。如下

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吧！希望你喜歡！

https://github.com/MeCKodo/we...

文章首發(fā)于http://www.meckodo.com

下一篇，我們將會介紹webpack兩種配置的差異。

云服務器 GPU云服務器友好提示 php 彈出友好提示錯誤提示表單錯誤提示

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/81810.html

相關(guān)文章

webpack2.x 中文文檔翻譯之開發(fā)Development

摘要：下載完成之后你可以這樣啟動它如果控制臺提醒這個指令無效，可以嘗試最好的方法是在中添加命令如下上述命令會使瀏覽器自動打開到地址。下載完成，如下使用。開發(fā)Development 在這篇中我們將說明怎樣開始開發(fā)，以及增從三個工具中擇一進行開發(fā)。假使你已經(jīng)設置了webpack.config.js設置文件。該文檔已在webpack2.x中存在，點擊這里永遠不要再生產(chǎn)產(chǎn)品中使用這些工具，絕對...

GeekGhc 2019-08-20 14:40 評論0 收藏0
2017個人總結(jié)

摘要：特此寫個流水賬總結(jié)，供自己以后羞恥的回顧。正逢月計劃辭職回家玩游戲過個暑假，結(jié)果在如今部門老大的忽悠下加入到了新東家。和組長兩人繼續(xù)沒晝夜的忙活，最終也按時交差，上了線。卷土重來，回報過去的一份念舊，期待的美好，個人選型入坑。前言 2017年發(fā)生了太多的事情，結(jié)了婚，住進了新家，成功的播了種，當上了準爸爸。公司也蒸蒸日上搬進了高大上的寫字樓。前端的坑越來越大，都來不及填。特此寫個流水...

Jason 2019-08-22 13:49 評論0 收藏0
無痛學會各種 2 的 Vue2+Vuex2+Webpack2 前后端同構(gòu)渲染

摘要：它會檢測出最大靜態(tài)子樹就是不需要動態(tài)性的子樹并且從渲染函數(shù)中萃取出來。這樣在每次重渲染的時候，它就會直接重用完全相同的同時跳過比對。需要注意的是，中的操作必須是同步的，不可以存在異步操作的情況。新增：哈哈，最近又推出了 vue 的文章，在這里放個鏈接~手把手教你從零寫一個簡單的 VUE 感謝有人看我扯技術(shù)，這篇文章主要介紹最近非常火的vue2前端框架的特點和vue2+vuex2+we...

fish 2019-08-29 11:27 評論0 收藏0
無痛學會各種 2 的 Vue2+Vuex2+Webpack2 前后端同構(gòu)渲染

摘要：它會檢測出最大靜態(tài)子樹就是不需要動態(tài)性的子樹并且從渲染函數(shù)中萃取出來。這樣在每次重渲染的時候，它就會直接重用完全相同的同時跳過比對。需要注意的是，中的操作必須是同步的，不可以存在異步操作的情況。新增：哈哈，最近又推出了 vue 的文章，在這里放個鏈接~手把手教你從零寫一個簡單的 VUE 感謝有人看我扯技術(shù)，這篇文章主要介紹最近非常火的vue2前端框架的特點和vue2+vuex2+we...

30e8336b8229 2019-08-22 10:40 評論0 收藏0
無痛學會各種 2 的 Vue2+Vuex2+Webpack2 前后端同構(gòu)渲染

摘要：它會檢測出最大靜態(tài)子樹就是不需要動態(tài)性的子樹并且從渲染函數(shù)中萃取出來。這樣在每次重渲染的時候，它就會直接重用完全相同的同時跳過比對。需要注意的是，中的操作必須是同步的，不可以存在異步操作的情況。新增：哈哈，最近又推出了 vue 的文章，在這里放個鏈接~手把手教你從零寫一個簡單的 VUE 感謝有人看我扯技術(shù)，這篇文章主要介紹最近非常火的vue2前端框架的特點和vue2+vuex2+we...

Pluser 2019-08-01 15:52 評論0 收藏0