{"id":15292659,"url":"https://github.com/meckodo/webpack-browser-log","last_synced_at":"2026-03-08T01:10:55.295Z","repository":{"id":127703796,"uuid":"82429801","full_name":"MeCKodo/webpack-browser-log","owner":"MeCKodo","description":"just add one line code, beautify your error information in project on browser","archived":false,"fork":false,"pushed_at":"2017-09-26T06:44:52.000Z","size":486,"stargazers_count":20,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T02:43:30.746Z","etag":null,"topics":["webpack-hot-middleware","webpack2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MeCKodo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-19T02:26:09.000Z","updated_at":"2023-03-31T03:55:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"2bd368ac-75ed-4446-b020-7ec0e7890de4","html_url":"https://github.com/MeCKodo/webpack-browser-log","commit_stats":null,"previous_names":["meckodo/webpack-broswer-log"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MeCKodo%2Fwebpack-browser-log","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MeCKodo%2Fwebpack-browser-log/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MeCKodo%2Fwebpack-browser-log/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MeCKodo%2Fwebpack-browser-log/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MeCKodo","download_url":"https://codeload.github.com/MeCKodo/webpack-browser-log/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248706013,"owners_count":21148629,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["webpack-hot-middleware","webpack2"],"created_at":"2024-09-30T16:25:27.161Z","updated_at":"2026-03-08T01:10:55.238Z","avatar_url":"https://github.com/MeCKodo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## webpack-broswer-log\n[![CircleCI](https://img.shields.io/circleci/project/github/MeCKodo/webpack-browser-log.svg)](https://circleci.com/gh/MeCKodo/webpack-browser-log) [![npm](https://img.shields.io/npm/v/webpack-browser-log.svg)](https://www.npmjs.com/package/webpack-browser-log) [![npm](https://img.shields.io/npm/dt/webpack-browser-log.svg)](https://www.npmjs.com/package/webpack-browser-log)\n\n\u003e Based on webpack-hot-middleware and webpack-dev-middleware friendly log errors on your browser.\n\n\u003e 中文文档在最下面\n\n### Installing\n\n\u003e npm i webpack-browser-log --save-dev;\n\n### Usage\n\nFirst, add `webpack-hot-middleware/client` into the entry array.Such as\n```javascript\nentry: {\n\tindex: ['webpack-hot-middleware/client?reload=true','./src/index.js'],\n\tvendor: ['vue', 'vue-router', 'vuex'],\n},\n```\n\nNext, add the following plugins to the plugins array:\n```javascript\nplugins : [\n\tnew webpack.HotModuleReplacementPlugin(),\n\tnew webpack.NoEmitOnErrorsPlugin(),\n\t//...\n]\n```\n\nNow, edit your dev-client.js\n```javascript\n// build/dev-client.js\n\nconst WebpackBrowserLog = require('webpack-browser-log'); // use webpack-browser-log\nconst merge = require('webpack-merge'); // use webpack-merge\nconst webpackDev = require('./webpack.dev'); // webpack dev config\nconst base = require('./webpack.base'); // webpack base config\nconst webpackConfig = merge(base, webpackDev); // merge base and dev\n\nnew WebpackBrowserLog(webpackConfig); // magic\n```\n\n```bash\n$ node build/dev-client.js\n```\n\n\u003e Open your browser on http://localhost:3000. Let's coding\n\n![gif](./webpack-browser-log.gif)\n\n### Config\n\nBecause of based on [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware#usage) and [webpack-hot-middleware](https://github.com/glenjamin/webpack-hot-middleware#config). You can read their doc directly.Enjoy yourself\n\n```javascript\nnew webpackBrowserLog(webpackConfig, {\n\tport : 3000, // default\n\terrorsPluginOptions: { // default\n    \t// https://www.npmjs.com/package/friendly-errors-webpack-plugin#options\n  \t},\n\tdevMiddleware : { // default\n\t\tpublicPath: webpackConfig.output.publicPath,\n\t\tquiet: true\n\t},\n\thotMiddleware : { // default\n\t\tlog: () =\u003e {}\n\t},\n\twaitUntilValid : function () { }, // default\n\tsetup(app, express) {\n\t\t// here you can get app express\n\t\t// example\n        app.use('/static', express.static('./static'));\n  \t},\n});\n```\n\n### Contributing\n\n1.Fork it!\n\n2.Create your feature branch: git checkout -b my-new-feature\n\n3.Commit your changes: git commit -am 'Add some feature'\n\n4.Push to the branch: git push origin my-new-feature\n\n5.Submit a pull request :D\n\n---\n\n\u003e 基于`webpack-hot-middleware`和`webpack-dev-middleware`，可以将你的错误友好的提示在浏览器上，无需切换命令行查看错误或者看浏览器的console面板\n\n### 安装\n\n\u003e npm i webpack-browser-log --save-dev;\n\n### 如何使用\n\n首先, 把你的entry改成如下形式，每个页面入口都需要写成数组并且在最前面加`webpack-hot-middleware/client?reload=true`\n```javascript\nentry: {\n\tindex: ['webpack-hot-middleware/client?reload=true','./src/index.js'],\n\tvendor: ['vue', 'vue-router', 'vuex'],\n},\n```\n\n接着, 在你的plugin里加入2个插件\n```javascript\nplugins : [\n\tnew webpack.HotModuleReplacementPlugin(),\n\tnew webpack.NoEmitOnErrorsPlugin(),\n\t//...\n]\n```\n\n完了以后，新建一个`dev-client.js`，复制如下代码\n```javascript\n// build/dev-client.js\n\nconst WebpackBrowserLog = require('webpack-browser-log'); // 引入webpack-browser-log\nconst merge = require('webpack-merge'); // 引入webpack-merge\nconst webpackDev = require('./webpack.dev'); // 引入你webpack.dev的配置\nconst base = require('./webpack.base'); // 引入你webpack base的配置\nconst webpackConfig = merge(base,webpackDev); // 合并两配置\n\nnew WebpackBrowserLog(webpackConfig); // 默认只需要传入需要启动的webpack配置就OK了\n\n```\n\n最后，运行这个文件\n\n```bash\n$ node build/dev-client.js\n```\n\n\u003e 打开你的浏览器，http://localhost:3000. 把你的代码故意改错试试，在浏览器上就会提示错误了\n\n此处有gif，没看见等一会\n\n![gif](./webpack-browser-log.gif)\n\n### 配置选项\n\n由于使用了[webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware#usage) 和 [webpack-hot-middleware](https://github.com/glenjamin/webpack-hot-middleware#config). 所以你可以直接阅读他们的文档，然后按照如下修改\n\n```javascript\nnew webpackBrowserLog(webpackConfig, {\n\tport : 3000, // 修改启动端口，默认3000\n\terrorsPluginOptions: { // default\n\t\t// https://www.npmjs.com/package/friendly-errors-webpack-plugin#options\n\t},\n\tdevMiddleware : { // 默认配置了publicPath和quiet，你可以覆盖它\n\t\tpublicPath: webpackConfig.output.publicPath,\n\t\tquiet: true\n\t},\n\thotMiddleware : { // 默认配置了log，你可以覆盖它\n\t\tlog: () =\u003e {}\n\t},\n\twaitUntilValid : function () { }, // 默认为空，这个是成功启动后的回调\n\t// 目前只有这4个字段是你可配置的，在下觉得已经足够了\n\t// new WebpackBrowserLog(webpackConfig); 最爽的就是直接这样\n\tsetup(app, express) {\n\t\t// 注册别的中间件\n\t\tapp.use('/static', express.static('./static'));\n\t},\n});\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeckodo%2Fwebpack-browser-log","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeckodo%2Fwebpack-browser-log","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeckodo%2Fwebpack-browser-log/lists"}