├── .gitattributes ├── .npmignore ├── .gitignore ├── .prettierrc ├── example ├── main.ts ├── demo.ts ├── index.html └── webpack.config.js ├── tsconfig.json ├── package.json ├── README.md ├── src └── index.ts └── yarn.lock /.gitattributes: -------------------------------------------------------------------------------- 1 | 2 | yarn.lock -diff 3 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | 2 | /index.html 3 | /example 4 | .awcache 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .target/ 2 | lib/ 3 | /node_modules/ 4 | 5 | .awcache 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "useTabs": false, 4 | "printWidth": 160, 5 | "trailingComma": "es5", 6 | "arrowParens": "always" 7 | } 8 | -------------------------------------------------------------------------------- /example/main.ts: -------------------------------------------------------------------------------- 1 | import "../src"; 2 | import "./demo"; 3 | 4 | declare let module: any; 5 | 6 | if (module.hot) { 7 | module.hot.accept("./demo", function _() { 8 | console.log("reload"); 9 | }); 10 | 11 | module.hot.accept("../src", function _() { 12 | window.location.reload(); 13 | }); 14 | } 15 | -------------------------------------------------------------------------------- /example/demo.ts: -------------------------------------------------------------------------------- 1 | export class Fibonacci { 2 | index: number; 3 | fibonacciNumber: number; 4 | 5 | public calculateFibonacciNumber() { 6 | this.fibonacciNumber = this.calculate(this.index); 7 | } 8 | 9 | private calculate(i: number): number { 10 | return i <= 2 ? 1 : this.calculate(i - 1) + this.calculate(i - 2); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 |Follow guide and edit demo.ts to try...
17 | 18 | 19 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "experimentalDecorators": true, 5 | "sourceMap": true, 6 | "noImplicitAny": false, 7 | "noImplicitThis": true, 8 | "strictNullChecks": false, 9 | "moduleResolution": "node", 10 | "module": "es6", 11 | "target": "es2015", 12 | "lib": ["es2016", "dom"], 13 | "baseUrl": "./src/", 14 | "plugins": [] 15 | }, 16 | "exclude": ["node_modules", "example"], 17 | "awesomeTypescriptLoaderOptions": { 18 | "useCache": true 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /example/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require("path"); 2 | 3 | module.exports = { 4 | mode: "development", 5 | entry: { 6 | main: ["./main"], 7 | }, 8 | performance: { 9 | hints: false, 10 | }, 11 | output: { 12 | filename: "bundle.js", 13 | path: "/example", 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.tsx?$/, 19 | loader: "awesome-typescript-loader", 20 | exclude: /node_modules/, 21 | }, 22 | ], 23 | }, 24 | resolve: { 25 | extensions: [".tsx", ".ts", ".js"], 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-hud", 3 | "version": "0.1.2", 4 | "main": "lib/index.js", 5 | "description": "Webpack HUD, for showing error messages", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/mvc-works/webpack-hud.git" 9 | }, 10 | "bugs": { 11 | "url": "https://github.com/mvc-works/webpack-hud/issues" 12 | }, 13 | "homepage": "https://github.com/mvc-works/webpack-hud#readme", 14 | "scripts": { 15 | "compile": "rm -rf lib/ && tsc --outDir lib", 16 | "prepublish": "yarn compile" 17 | }, 18 | "keywords": [ 19 | "webpack", 20 | "devserver", 21 | "errors", 22 | "hud" 23 | ], 24 | "author": "jiyinyiyong", 25 | "license": "MIT", 26 | "dependencies": { 27 | "bottom-tip": "^0.1.0", 28 | "doc-ready": "^1.0.4", 29 | "strip-ansi": "^4.0.0" 30 | }, 31 | "devDependencies": { 32 | "awesome-typescript-loader": "^5.2.0", 33 | "typescript": "^3.0.1", 34 | "webpack": "^5.94.0", 35 | "webpack-cli": "^3.1.0", 36 | "webpack-dev-server": "^5.2.1" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Webpack HUD, displaying errors in app 2 | 3 |  4 | 5 | ### Usage 6 | 7 | ```bash 8 | npm i --save-dev webpack-hud 9 | ``` 10 | 11 | ```js 12 | module.exports = { 13 | entry: { 14 | main: [ 15 | "webpack-hud", // <-- put package here, before your code 16 | "./src/main", 17 | ], 18 | }, 19 | output: { 20 | filename: "bundle.js", 21 | path: "build/", 22 | }, 23 | module: { 24 | rules: [ 25 | { 26 | test: /\.tsx?$/, 27 | loader: "awesome-typescript-loader", 28 | exclude: /node_modules/, 29 | }, 30 | ], 31 | }, 32 | resolve: { 33 | extensions: [".tsx", ".ts", ".js"], 34 | }, 35 | }; 36 | ``` 37 | 38 | ### How does it work? 39 | 40 | I copied the code to started another Sockjs channel listening to Webpack compilation results. 41 | And an element is appended to the `