Webpack2 的無腦友好錯(cuò)誤提示工具

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

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

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

這里有張gif的效果圖，請(qǐng)等待

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

不久前研究webpack2，順便產(chǎn)出了一個(gè)這樣的小工具。好吧，其實(shí)很早以前就有了，在下只是封裝了下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); // 合并兩配置

//重點(diǎn)在下 ---------
new WebpackBrowserLog(webpackConfig); // 默認(rèn)只需要傳入需要啟動(dòng)的webpack配置就OK了
//重點(diǎn)在上 ---------

剩下的還是直接看github的readme吧！希望你喜歡！

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

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

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

GPU云服務(wù)器云服務(wù)器友好提示 php 彈出友好提示錯(cuò)誤提示表單錯(cuò)誤提示

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

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

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

Pluser 2019-08-01 15:52 評(píng)論0 收藏0