资讯专栏INFORMATION COLUMN

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

cucumber / 1879人阅读

摘要:你只需要一行就可以实现和友好的错误提示这里有张的效果图,请等待平时我们都在浏览器的面板里看错误,或者是在命令行里看错误真是太累了浏览器直接显示错误极大的提升了开发的效率不久前研究,顺便产出了一个这样的小工具。

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

new WebpackBrowserLog(webpackConfig)

这里有张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吧!希望你喜欢!

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

文章首发于http://www.meckodo.com

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81810.html

相关文章

  • webpack2.x 中文文档 翻译 之 开发Development

    摘要:下载完成之后你可以这样启动它如果控制台提醒这个指令无效,可以尝试最好的方法是在中添加命令如下上述命令会使浏览器自动打开到地址。下载完成,如下使用。 开发Development 在这篇中我们将说明怎样开始开发,以及增从三个工具中择一进行开发。假使你已经设置了webpack.config.js设置文件。 该文档已在webpack2.x中存在,点击这里 永远不要再生产产品中使用这些工具,绝对...

    GeekGhc 评论0 收藏0
  • 2017个人总结

    摘要:特此写个流水账总结,供自己以后羞耻的回顾。正逢月计划辞职回家玩游戏过个暑假,结果在如今部门老大的忽悠下加入到了新东家。和组长两人继续没昼夜的忙活,最终也按时交差,上了线。卷土重来,回报过去的一份念旧,期待的美好,个人选型入坑。 前言 2017年发生了太多的事情,结了婚,住进了新家,成功的播了种,当上了准爸爸。公司也蒸蒸日上搬进了高大上的写字楼。前端的坑越来越大,都来不及填。特此写个流水...

    Jason 评论0 收藏0
  • 无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

    摘要:它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候,它就会直接重用完全相同的同时跳过比对。需要注意的是,中的操作必须是同步的,不可以存在异步操作的情况。 新增:哈哈,最近又推出了 vue 的文章,在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术,这篇文章主要介绍最近非常火的vue2前端框架的特点和vue2+vuex2+we...

    fish 评论0 收藏0
  • 无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

    摘要:它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候,它就会直接重用完全相同的同时跳过比对。需要注意的是,中的操作必须是同步的,不可以存在异步操作的情况。 新增:哈哈,最近又推出了 vue 的文章,在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术,这篇文章主要介绍最近非常火的vue2前端框架的特点和vue2+vuex2+we...

    30e8336b8229 评论0 收藏0
  • 无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

    摘要:它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候,它就会直接重用完全相同的同时跳过比对。需要注意的是,中的操作必须是同步的,不可以存在异步操作的情况。 新增:哈哈,最近又推出了 vue 的文章,在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术,这篇文章主要介绍最近非常火的vue2前端框架的特点和vue2+vuex2+we...

    Pluser 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<