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

2021-09-11 08:58:44 字數 960 閱讀 4595

你只需要一行就可以實現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吧!希望你喜歡!

文章首發於www.meckodo.com

webpack 2 安裝和使用

webpack cli 讓我們能在命令列中直接執行webpack或者使用 npm scripts 執行webpack命令 1.webpack 配置 在命令列中執行,配置項加在後面 webpack src js index.js o dist js build.js mode development2...

記錄一次webpack2的專案架構

1 npm init y 生成package.json專案描述檔案。7 建立.babelrc檔案將預設寫入 preset 8 分別建立兩個資料夾 src資料夾和build資料夾,前者用於放源 後者用於放打包後的的 9 webpack.config.js的配置 const path require p...

不要無腦搬運別人的錯誤

剛在搜尋乙個東西,看到某博主寫的文章,文中把match 錯打成了 metch 閱讀的時候問題不大,我的人肉糾錯自動糾正了這個小問題。結果後面隨手一搜,竟然發現各個平台上都有這樣的錯誤,文章內容完全一致。不禁有感而發,我找資料基本找到後多半都會謹慎地讀完原文,然後驗證一遍 雖說不能完全保證自己寫的不存...