Merge pull request #331 from alibaba/web-ui-enhance

Web ui enhance

lib/requestHandler.js

@@ -44,7 +44,7 @@ const getErrorResponse = (error, fullUrl) => {
     header: {
       'Content-Type': 'text/html; charset=utf-8',
       'Proxy-Error': true,
-      'Proxy-Error-Message': error || 'null'
+      'Proxy-Error-Message': error ? JSON.stringify(error) : 'null'
     },
     body: requestErrorHandler.getErrorContent(error, fullUrl)
   };

package.json

@@ -37,6 +37,7 @@
     "qrcode-npm": "0.0.3",
     "request": "^2.74.0",
     "stream-throttle": "^0.1.3",
+    "svg-inline-react": "^1.0.2",
     "whatwg-fetch": "^1.0.0",
     "ws": "^2.2.0"
   },
@@ -60,7 +61,7 @@
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-jsx-a11y": "^5.1.1",
     "eslint-plugin-react": "^7.4.0",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^0.9.0",
     "https-proxy-agent": "^1.0.0",
     "jasmine": "^2.5.3",
@@ -88,9 +89,8 @@
     "stream-equal": "0.1.8",
     "style-loader": "^0.13.1",
     "svg-inline-loader": "^0.7.1",
-    "svg-inline-react": "^1.0.2",
     "url-loader": "^0.5.7",
-    "webpack": "^1.12.9",
+    "webpack": "^3.10.0",
     "worker-loader": "^0.7.1"
   },
   "scripts": {
@@ -99,8 +99,8 @@
     "lint": "eslint .",
     "testserver": "node test/server/startServer.js",
     "testOutWeb": "jasmine test/spec_outweb/test_realweb_spec.js",
-    "buildweb": "NODE_ENV=production webpack --config web/webpack.config.js --process --colors",
+    "buildweb": "NODE_ENV=production webpack --config web/webpack.config.js --colors",
-    "webserver": "NODE_ENV=test webpack --config web/webpack.config.js --process --colors --watch",
+    "webserver": "NODE_ENV=test webpack --config web/webpack.config.js --colors --watch",
     "doc:serve": "node build_scripts/prebuild-doc.js && gitbook serve ./docs-src ./docs --log debug",
     "doc:build": "./build_scripts/build-doc-site.sh"
   },

web/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')
+  ]
+}

web/src/component/header-menu.jsx

@@ -208,7 +208,7 @@ class HeaderMenu extends React.Component {
         onClick={this.stopRecording}
       >
         <div className={Style.filterIcon}>
-          <InlineSVG src={require('svg-inline!assets/stop.svg')} />
+          <InlineSVG src={require('svg-inline-loader!assets/stop.svg')} />
         </div>
         <span>Stop</span>
       </a>
@@ -221,7 +221,7 @@ class HeaderMenu extends React.Component {
         onClick={this.resumeRecording}
       >
         <div className={Style.stopIcon}>
-          <InlineSVG src={require('svg-inline!assets/play.svg')} />
+          <InlineSVG src={require('svg-inline-loader!assets/play.svg')} />
         </div>
         <span>Resume</span>
       </a>
@@ -234,7 +234,7 @@ class HeaderMenu extends React.Component {
         onClick={this.showFilter}
       >
         <div className={Style.stopIcon}>
-          <InlineSVG src={require('svg-inline!assets/filter.svg')} />
+          <InlineSVG src={require('svg-inline-loader!assets/filter.svg')} />
         </div>
         <span>Filter</span>
       </a>
@@ -250,7 +250,7 @@ class HeaderMenu extends React.Component {
             onClick={this.clearAllRecord}
             title="Ctrl + X"
           >
-            <InlineSVG src={require('svg-inline!assets/clear.svg')} />
+            <InlineSVG src={require('svg-inline-loader!assets/clear.svg')} />
             <span>Clear</span>
           </a>
           {inAppMode ? filterMenu : null}
@@ -269,7 +269,7 @@ class HeaderMenu extends React.Component {
               href="javascript:void(0)"
             >
               <div className={Style.tipIcon} >
-                <InlineSVG src={require('svg-inline!assets/tip.svg')} />
+                <InlineSVG src={require('svg-inline-loader!assets/tip.svg')} />
               </div>
               <span>Proxy Info</span>
             </a>

web/src/component/left-menu.jsx

@@ -93,7 +93,7 @@ class LeftMenu extends React.Component {
             title="Only show the filtered result"
           >
             <span className={Style.filterIcon}>
-              <InlineSVG src={require('svg-inline!assets/filter.svg')} />
+              <InlineSVG src={require('svg-inline-loader!assets/filter.svg')} />
             </span>
             <span>Filter</span>
           </a>
@@ -105,7 +105,7 @@ class LeftMenu extends React.Component {
             title="Download the root CA to the computer and your phone"
           >
             <span className={Style.downloadIcon}>
-              <InlineSVG src={require('svg-inline!assets/download.svg')} />
+              <InlineSVG src={require('svg-inline-loader!assets/download.svg')} />
             </span>
             <span>RootCA</span>
           </a>

web/webpack.config.js

@@ -3,6 +3,8 @@ const path = require('path');
 const autoprefixer = require('autoprefixer');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
+const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
+
 const extractCss = new ExtractTextPlugin('[name].css', {
   disable: false,
   allChunks: true
@@ -22,73 +24,91 @@ module.exports = {
     filename: 'main.js'
   },
   resolve: {
-    root: path.join(__dirname, 'src'),
+    modules: [
-    extensions: ['', '.js', '.jsx']
+      'node_modules',
+      path.join(__dirname, 'src')
+    ],
+    extensions: ['.', '.js', '.jsx']
   },
   module: {
-    loaders: [{
+    rules: [{
       test: /\.js$/,
       exclude: /node_modules/,
-      loader: 'babel',
+      loader: 'babel-loader',
-      query: {
+      options: {
         presets: ['es2015', 'stage-0']
       }
     },
     {
       test: /\.jsx$/,
       exclude: /node_modules/,
-      loader: 'babel',
+      use: {
-      query: {
+        loader: 'babel-loader',
-        presets: ['es2015', 'stage-0', 'react'],
+        options: {
-        plugins: ['transform-runtime', ['import', { libraryName: 'antd', style: true }]]
+          presets: ['es2015', 'stage-0', 'react'],
+          plugins: [['import', { libraryName: 'antd', style: true }]]
+        }
       }
     },
     {
       test: function (filePath) {
         return (/antd\/.*\.less$/.test(filePath) || /\.global\.less$/.test(filePath));
       },
-      loader: ExtractTextPlugin.extract('css!postcss!less')
+      use: ExtractTextPlugin.extract({use: 'css-loader!postcss-loader!less-loader'})
     },
     {
       test: function (filePath) {
         return (/\.less$/.test(filePath) && !/\.global\.less$/.test(filePath) && !/antd\/.*\.less$/.test(filePath));
       },
-      loader: ExtractTextPlugin.extract('css?modules&localIdentName=[local]___[hash:base64:5]!postcss!less')
+      use: ExtractTextPlugin.extract({use: 'css-loader?modules&localIdentName=[local]___[hash:base64:5]!postcss-loader!less-loader'})
     },
     {
       test: /\.css$/,
-      loader: ExtractTextPlugin.extract('css')
+      use: ExtractTextPlugin.extract({use:'css-loader'})
     },
     {
       test: /\.png(\?v=\d+\.\d+\.\d+)?$/,
-      loader: 'url?limit=10000&mimetype=image/png'
+      use: {
+        loader: 'url-loader?limit=10000&mimetype=image/png'
+      }
     },
     {
       test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
-      loader: 'url?limit=10000&mimetype=application/font-woff'
+      use: {
+        loader: 'url-loader?limit=10000&mimetype=application/font-woff'
+      }
     },
     {
       test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
-      loader: 'url?limit=10000&mimetype=application/font-woff'
+      use: {
+        loader: 'url-loader?limit=10000&mimetype=application/font-woff'
+      }
     },
     {
       test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
-      loader: 'url?limit=10000&mimetype=application/octet-stream'
+      use: {
+        loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
+      }
     },
     {
       test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
-      loader: 'url?limit=10000&mimetype=application/octet-stream'
+      use: {
+        loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
+      }
     },
     {
       test: /font\.svg(\?v=\d+\.\d+\.\d+)?$/,
-      loader: 'url?limit=10000&mimetype=image/svg+xml'
+      use: {
+        loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
+      }
     }]
   },
-  postcss: function () {
-    return [autoprefixer];
-  },
   plugins: [
     extractCss,
-    defineProperty
+    defineProperty,
-  ]
+    new UglifyJsPlugin()
+  ],
+  stats: {
+    children: false
+  }
 };