├── webpack-browser-log.gif ├── circle.yml ├── .eslintrc.js ├── .gitignore ├── package.json ├── index.js └── README.md /webpack-browser-log.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MeCKodo/webpack-browser-log/HEAD/webpack-browser-log.gif -------------------------------------------------------------------------------- /circle.yml: -------------------------------------------------------------------------------- 1 | machine: 2 | node: 3 | version: 6 4 | 5 | dependencies: 6 | override: 7 | - yarn 8 | cache_directories: 9 | - ~/.cache/yarn 10 | 11 | test: 12 | override: 13 | - npm test -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "extends": "airbnb-base", 3 | "plugins": [ 4 | "import" 5 | ], 6 | "rules": { 7 | "global-require": 0, 8 | "indent": [0, "tab"], // 去掉tab约定,IDE会有问题 9 | "no-new": 0, // 避免vue 必须new调用的注释 10 | "no-var": 0, // 避免vue 必须new调用的注释 11 | "no-trailing-spaces": [0, { "skipBlankLines": true }],// 去掉行未得空格 12 | "no-tabs": 0, 13 | "no-console": 0, 14 | "key-spacing": 0, 15 | "prefer-arrow-callback": 0 16 | }, 17 | }; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # node-waf configuration 27 | .lock-wscript 28 | 29 | # Compiled binary addons (http://nodejs.org/api/addons.html) 30 | build/Release 31 | 32 | # Dependency directories 33 | node_modules 34 | jspm_packages 35 | 36 | # Optional npm cache directory 37 | .npm 38 | 39 | # Optional eslint cache 40 | .eslintcache 41 | 42 | # Optional REPL history 43 | .node_repl_history 44 | 45 | # Output of 'npm pack' 46 | *.tgz 47 | 48 | # Yarn Integrity file 49 | .yarn-integrity 50 | 51 | .idea 52 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-browser-log", 3 | "version": "1.0.0", 4 | "description": "friendly log errors on your browser", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": " node_modules/.bin/eslint index.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/MeCKodo/webpack-broswer-log.git" 12 | }, 13 | "keywords": [ 14 | "webpack2", 15 | "webpack-hot-middleware" 16 | ], 17 | "author": "二哲", 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/MeCKodo/webpack-broswer-log/issues" 21 | }, 22 | "homepage": "https://github.com/MeCKodo/webpack-broswer-log#readme", 23 | "dependencies": { 24 | "eslint": "^3.15.0", 25 | "express": "^4.14.1", 26 | "friendly-errors-webpack-plugin": "^1.6.1", 27 | "webpack": "^2.2.1", 28 | "webpack-dev-middleware": "^1.12.0", 29 | "webpack-hot-middleware": "^2.18.2" 30 | }, 31 | "devDependencies": { 32 | "eslint": "^3.15.0", 33 | "eslint-config-airbnb-base": "^11.1.0", 34 | "eslint-plugin-import": "^2.2.0" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var webpack = require('webpack'); 3 | var FriendLyErrorsPlugin = require('friendly-errors-webpack-plugin'); 4 | 5 | var app = express(); 6 | 7 | function WebpackBrowserLog(webpackConfig, options) { 8 | webpackConfig.plugins.push(new FriendLyErrorsPlugin(options.errorsPluginOptions || {})); 9 | this.init(webpackConfig, options || {}); 10 | } 11 | 12 | WebpackBrowserLog.prototype = { 13 | constructor: WebpackBrowserLog, 14 | init: function init(webpackConfig, options) { 15 | var compiler = webpack(webpackConfig); 16 | var devMiddleConfig = options.devMiddleware || { // https://github.com/webpack/webpack-dev-middleware#usage 17 | publicPath: webpackConfig.output.publicPath, 18 | quiet: true, 19 | }; 20 | var hotMiddleConfig = options.hotMiddleware || { // https://github.com/glenjamin/webpack-hot-middleware#config 21 | log: () => {}, 22 | heartbeat: 2000, 23 | }; 24 | var devMiddleware = this.devMiddleware(compiler, devMiddleConfig); 25 | 26 | var hotMiddleware = this.hotMiddleware(compiler, hotMiddleConfig); 27 | 28 | app.use(devMiddleware); 29 | 30 | app.use(hotMiddleware); 31 | 32 | options.setup(app, express); 33 | 34 | devMiddleware.waitUntilValid(options.waitUntilValid || function waitUntiValid() { 35 | }); 36 | 37 | this.listen(options.port); 38 | }, 39 | devMiddleware: function devMiddleware(compiler, devOptions) { 40 | return require('webpack-dev-middleware')(compiler, devOptions); 41 | }, 42 | hotMiddleware: function hotMiddleware(compiler, hotOptions) { 43 | return require('webpack-hot-middleware')(compiler, hotOptions); 44 | }, 45 | listen: function listen(port) { 46 | app.listen(port || 3000, function error(err) { 47 | if (err) { 48 | console.log(err); 49 | } 50 | }); 51 | }, 52 | }; 53 | 54 | module.exports = WebpackBrowserLog; 55 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## webpack-broswer-log 2 | [![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) 3 | 4 | > Based on webpack-hot-middleware and webpack-dev-middleware friendly log errors on your browser. 5 | 6 | > 中文文档在最下面 7 | 8 | ### Installing 9 | 10 | > npm i webpack-browser-log --save-dev; 11 | 12 | ### Usage 13 | 14 | First, add `webpack-hot-middleware/client` into the entry array.Such as 15 | ```javascript 16 | entry: { 17 | index: ['webpack-hot-middleware/client?reload=true','./src/index.js'], 18 | vendor: ['vue', 'vue-router', 'vuex'], 19 | }, 20 | ``` 21 | 22 | Next, add the following plugins to the plugins array: 23 | ```javascript 24 | plugins : [ 25 | new webpack.HotModuleReplacementPlugin(), 26 | new webpack.NoEmitOnErrorsPlugin(), 27 | //... 28 | ] 29 | ``` 30 | 31 | Now, edit your dev-client.js 32 | ```javascript 33 | // build/dev-client.js 34 | 35 | const WebpackBrowserLog = require('webpack-browser-log'); // use webpack-browser-log 36 | const merge = require('webpack-merge'); // use webpack-merge 37 | const webpackDev = require('./webpack.dev'); // webpack dev config 38 | const base = require('./webpack.base'); // webpack base config 39 | const webpackConfig = merge(base, webpackDev); // merge base and dev 40 | 41 | new WebpackBrowserLog(webpackConfig); // magic 42 | ``` 43 | 44 | ```bash 45 | $ node build/dev-client.js 46 | ``` 47 | 48 | > Open your browser on http://localhost:3000. Let's coding 49 | 50 | ![gif](./webpack-browser-log.gif) 51 | 52 | ### Config 53 | 54 | Because 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 55 | 56 | ```javascript 57 | new webpackBrowserLog(webpackConfig, { 58 | port : 3000, // default 59 | errorsPluginOptions: { // default 60 | // https://www.npmjs.com/package/friendly-errors-webpack-plugin#options 61 | }, 62 | devMiddleware : { // default 63 | publicPath: webpackConfig.output.publicPath, 64 | quiet: true 65 | }, 66 | hotMiddleware : { // default 67 | log: () => {} 68 | }, 69 | waitUntilValid : function () { }, // default 70 | setup(app, express) { 71 | // here you can get app express 72 | // example 73 | app.use('/static', express.static('./static')); 74 | }, 75 | }); 76 | ``` 77 | 78 | ### Contributing 79 | 80 | 1.Fork it! 81 | 82 | 2.Create your feature branch: git checkout -b my-new-feature 83 | 84 | 3.Commit your changes: git commit -am 'Add some feature' 85 | 86 | 4.Push to the branch: git push origin my-new-feature 87 | 88 | 5.Submit a pull request :D 89 | 90 | --- 91 | 92 | > 基于`webpack-hot-middleware`和`webpack-dev-middleware`，可以将你的错误友好的提示在浏览器上，无需切换命令行查看错误或者看浏览器的console面板 93 | 94 | ### 安装 95 | 96 | > npm i webpack-browser-log --save-dev; 97 | 98 | ### 如何使用 99 | 100 | 首先, 把你的entry改成如下形式，每个页面入口都需要写成数组并且在最前面加`webpack-hot-middleware/client?reload=true` 101 | ```javascript 102 | entry: { 103 | index: ['webpack-hot-middleware/client?reload=true','./src/index.js'], 104 | vendor: ['vue', 'vue-router', 'vuex'], 105 | }, 106 | ``` 107 | 108 | 接着, 在你的plugin里加入2个插件 109 | ```javascript 110 | plugins : [ 111 | new webpack.HotModuleReplacementPlugin(), 112 | new webpack.NoEmitOnErrorsPlugin(), 113 | //... 114 | ] 115 | ``` 116 | 117 | 完了以后，新建一个`dev-client.js`，复制如下代码 118 | ```javascript 119 | // build/dev-client.js 120 | 121 | const WebpackBrowserLog = require('webpack-browser-log'); // 引入webpack-browser-log 122 | const merge = require('webpack-merge'); // 引入webpack-merge 123 | const webpackDev = require('./webpack.dev'); // 引入你webpack.dev的配置 124 | const base = require('./webpack.base'); // 引入你webpack base的配置 125 | const webpackConfig = merge(base,webpackDev); // 合并两配置 126 | 127 | new WebpackBrowserLog(webpackConfig); // 默认只需要传入需要启动的webpack配置就OK了 128 | 129 | ``` 130 | 131 | 最后，运行这个文件 132 | 133 | ```bash 134 | $ node build/dev-client.js 135 | ``` 136 | 137 | > 打开你的浏览器，http://localhost:3000. 把你的代码故意改错试试，在浏览器上就会提示错误了 138 | 139 | 此处有gif，没看见等一会 140 | 141 | ![gif](./webpack-browser-log.gif) 142 | 143 | ### 配置选项 144 | 145 | 由于使用了[webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware#usage) 和 [webpack-hot-middleware](https://github.com/glenjamin/webpack-hot-middleware#config). 所以你可以直接阅读他们的文档，然后按照如下修改 146 | 147 | ```javascript 148 | new webpackBrowserLog(webpackConfig, { 149 | port : 3000, // 修改启动端口，默认3000 150 | errorsPluginOptions: { // default 151 | // https://www.npmjs.com/package/friendly-errors-webpack-plugin#options 152 | }, 153 | devMiddleware : { // 默认配置了publicPath和quiet，你可以覆盖它 154 | publicPath: webpackConfig.output.publicPath, 155 | quiet: true 156 | }, 157 | hotMiddleware : { // 默认配置了log，你可以覆盖它 158 | log: () => {} 159 | }, 160 | waitUntilValid : function () { }, // 默认为空，这个是成功启动后的回调 161 | // 目前只有这4个字段是你可配置的，在下觉得已经足够了 162 | // new WebpackBrowserLog(webpackConfig); 最爽的就是直接这样 163 | setup(app, express) { 164 | // 注册别的中间件 165 | app.use('/static', express.static('./static')); 166 | }, 167 | }); 168 | ``` --------------------------------------------------------------------------------