Adding eslint-import-resolver-webpack and webpack-dashboard & Adjusti…

…ng dependencies type & Modify README & Bump version
wellyshen · Feb 17, 2018 · 70f63cc · 70f63cc
1 parent 98fa94a
commit 70f63cc
Show file tree

Hide file tree

Showing 5 changed files with 608 additions and 69 deletions.
diff --git a/README.md b/README.md
@@ -101,6 +101,7 @@ I use [better-npm-run](https://github.com/benoror/better-npm-run) to manage the
 | `yarn <script>`    | Description                                                                                |
 | ------------------ | ------------------------------------------------------------------------------------------ |
 | `start`            | Run your app on the development server at `localhost:3000`. HMR will be enabled.           |
+| `start:dashboard`  | The same with `start` and webpack bundle info will be turned into dashboard mode.          |
 | `start:production` | Bundle files to `./public/assets` and run it on the production server at `localhost:8080`. |
 | `start:prod`       | Run your app on the production server only at `localhost:8080`.                            |
 | `build`            | Remove the previous bundled files and bundle it to `./public/assets`.                      |

diff --git a/index.js b/index.js
@@ -1,5 +1,4 @@
 /* @flow */
-/* eslint-disable */
 
 // Allows you to use the full set of ES6 features on server-side (place it before anything else)
 require('babel-polyfill');

diff --git a/package.json b/package.json
@@ -1,7 +1,8 @@
 {
   "name": "react-cool-starter",
-  "version": "2.2.15",
-  "description": "A starter boilerplate for an universal web application with the best development experience and best practices.",
+  "version": "2.2.16",
+  "description":
+    "A starter boilerplate for an universal web application with the best development experience and best practices.",
   "main": "index.js",
   "engines": {
     "node": ">=6.0",
@@ -38,6 +39,7 @@
   "homepage": "https://github.com/wellyshen/react-cool-starter",
   "scripts": {
     "start": "better-npm-run start",
+    "start:dashboard": "webpack-dashboard yarn start",
     "start:production": "yarn build && yarn start:prod",
     "start:prod": "better-npm-run start:prod",
     "build": "yarn clean:build && better-npm-run build",
@@ -72,13 +74,15 @@
       }
     },
     "build": {
-      "command": "webpack --progress --hide-modules --config ./tools/webpack/config.babel.js",
+      "command":
+        "webpack --progress --hide-modules --config ./tools/webpack/config.babel.js",
       "env": {
         "NODE_ENV": "production"
       }
     },
     "build:stats": {
-      "command": "webpack --progress --hide-modules --config ./tools/webpack/config.babel.js",
+      "command":
+        "webpack --progress --hide-modules --config ./tools/webpack/config.babel.js",
       "env": {
         "NODE_ENV": "stats"
       }
@@ -123,33 +127,24 @@
       "stage-0",
       "flow"
     ],
-    "plugins": [
-      "loadable-components/babel",
-      "dynamic-import-node",
-      "lodash"
-    ],
+    "plugins": ["loadable-components/babel", "dynamic-import-node", "lodash"],
     "env": {
       "production": {
-        "plugins": [
-          "transform-remove-console"
-        ]
+        "plugins": ["transform-remove-console"]
       }
     }
   },
   "eslintConfig": {
     "parser": "babel-eslint",
-    "extends": [
-      "plugin:lodash-fp/recommended",
-      "airbnb",
-      "prettier"
-    ],
-    "plugins": [
-      "lodash-fp",
-      "react",
-      "jsx-a11y",
-      "import",
-      "prettier"
-    ],
+    "extends": ["plugin:lodash-fp/recommended", "airbnb", "prettier"],
+    "plugins": ["lodash-fp", "react", "jsx-a11y", "import", "prettier"],
+    "settings": {
+      "import/resolver": {
+        "webpack": {
+          "config": "./tools/webpack/config.babel.js"
+        }
+      }
+    },
     "env": {
       "browser": true,
       "node": true,
@@ -164,10 +159,7 @@
       "react/jsx-filename-extension": [
         1,
         {
-          "extensions": [
-            ".js",
-            ".jsx"
-          ]
+          "extensions": [".js", ".jsx"]
         }
       ],
       "import/no-extraneous-dependencies": [
@@ -179,9 +171,7 @@
       "jsx-a11y/anchor-is-valid": [
         "error",
         {
-          "specialLink": [
-            "to"
-          ]
+          "specialLink": ["to"]
         }
       ],
       "lodash-fp/use-fp": 0,
@@ -210,25 +200,14 @@
       "selector-pseudo-class-no-unknown": [
         true,
         {
-          "ignorePseudoClasses": [
-            "global",
-            "local"
-          ]
+          "ignorePseudoClasses": ["global", "local"]
         }
       ]
     }
   },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "ie >= 11",
-    "safari >= 7"
-  ],
+  "browserslist": ["> 1%", "last 2 versions", "ie >= 11", "safari >= 7"],
   "jest": {
-    "setupFiles": [
-      "raf/polyfill",
-      "<rootDir>/tools/jest/setup.js"
-    ],
+    "setupFiles": ["raf/polyfill", "<rootDir>/tools/jest/setup.js"],
     "globals": {
       "__DEV__": true
     },
@@ -245,24 +224,24 @@
     ],
     "moduleNameMapper": {
       ".*\\.(css|scss|sass)$": "<rootDir>/tools/jest/styleMock.js",
-      ".*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tools/jest/assetMock.js"
+      ".*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+        "<rootDir>/tools/jest/assetMock.js"
     }
   },
   "dependencies": {
     "axios": "0.17.1",
+    "babel-polyfill": "^6.26.0",
     "babel-register": "^6.26.0",
     "chalk": "2.3.1",
     "compression": "1.7.1",
     "express": "4.16.2",
     "helmet": "3.11.0",
     "history": "^4.7.2",
     "hpp": "^0.2.2",
-    "html-minifier": "3.5.9",
     "loadable-components": "1.1.1",
     "lodash": "4.17.5",
     "morgan": "1.9.0",
     "normalize.css": "^8.0.0",
-    "opn": "5.2.0",
     "prop-types": "^15.6.0",
     "react": "16.2.0",
     "react-dom": "16.2.0",
@@ -304,6 +283,7 @@
     "eslint": "4.9.0",
     "eslint-config-airbnb": "16.1.0",
     "eslint-config-prettier": "^2.9.0",
+    "eslint-import-resolver-webpack": "^0.8.4",
     "eslint-loader": "^1.9.0",
     "eslint-plugin-import": "2.7.0",
     "eslint-plugin-jsx-a11y": "6.0.2",
@@ -313,12 +293,14 @@
     "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "1.1.6",
     "flow-bin": "0.66.0",
+    "html-minifier": "^3.5.9",
     "identity-obj-proxy": "^3.0.0",
     "image-webpack-loader": "4.1.0",
     "jest": "22.3.0",
     "nock": "9.1.6",
     "node-sass": "4.7.2",
     "nodemon": "1.15.0",
+    "opn": "^5.2.0",
     "postcss": "6.0.18",
     "postcss-loader": "2.1.0",
     "prettier": "1.10.2",
@@ -335,6 +317,7 @@
     "url-loader": "0.6.2",
     "webpack": "3.11.0",
     "webpack-bundle-analyzer": "2.10.0",
+    "webpack-dashboard": "^1.1.1",
     "webpack-dev-middleware": "2.0.5",
     "webpack-hot-middleware": "2.21.0"
   },

diff --git a/src/server.js b/src/server.js
@@ -42,9 +42,12 @@ if (!__DEV__) {
 
   const webpack = require('webpack');
   const webpackConfig = require('../tools/webpack/config.babel');
-
+  const DashboardPlugin = require('webpack-dashboard/plugin');
   const compiler = webpack(webpackConfig);
 
+  compiler.apply(new webpack.ProgressPlugin());
+  compiler.apply(new DashboardPlugin());
+
   app.use(
     require('webpack-dev-middleware')(compiler, {
       publicPath: webpackConfig.output.publicPath,