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

最新推荐文章于 2025-08-11 22:27:06 发布

weixin_33725515

最新推荐文章于 2025-08-11 22:27:06 发布

阅读量66

点赞数

CC 4.0 BY-SA版权

文章标签： webpack ViewUI

原文链接：https://segmentfault.com/a/1190000008522428

介绍了一个简化Webpack配置的小工具，只需一行代码即可实现热重载和友好的浏览器错误提示，极大提高了开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

你只需要一行就可以实现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吧！希望你喜欢！

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

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

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