Refactor example (#477)

* refactor: refactor example to support open browser auto and hot reload

* refactor:refactor example webpack.dev.conf.js

Author: luozhang002

example/README.md

@@ -2,7 +2,7 @@
 
 Play with OSS right in the browser!
 
-![Demo](screenshot.png?raw=true "OSS in Browser")
+<image src="https://img.alicdn.com/tfs/TB1tE5mvTtYBeNjy1XdXXXXyVXa-2538-1386.png" width="1000" height="500"/>
 
 ## Browser support
 
@@ -30,25 +30,24 @@ access.
 
 ### App setup
 
-Fill in your appServer address and bucket name in `app.js`:
+Fill in your bucket name  and region in `app.js`: (Note: ensure port 9000 is not used)
 
 ```js
-var appServer = '<your STS app server>';
 var bucket = '<your bucket name>';
 var region = 'oss-cn-hangzhou';
 ```
 
-Build the JS file
+Then set env
 
 ```
-    npm install && webpack
-``` 
-
+   ALI_SDK_STS_ID={your sts accessKeyId} ALI_SDK_STS_SECRET={your sts accessKeySecret} ALI_SDK_STS_ROLE={your rolearn}
+```
 
-Then set env and start the server
+Start the server
 
 ```
-   ALI_SDK_STS_ID={your sts accessKeyId} ALI_SDK_STS_SECRET={your sts accessKeySecret} ALI_SDK_STS_ROLE={your rolearn} node server/app.js
+npm run start
+
 ```
 
 Open the `http://localhost:3000` in browser

example/config/webpack.dev.conf.js

@@ -0,0 +1,56 @@
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack')
+
+const HtmlWebpackPluginConfig = {
+  filename: 'index.html',
+  template: './template/index.html', 
+  inject:'body',
+}
+
+module.exports = {
+  context: path.resolve(__dirname,'../src'),
+  entry: './main',
+  output:{
+    path:path.resolve(__dirname,'../dist'),
+    filename: './[hash]app.js',
+    hashDigestLength: 8
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [ 'style-loader', 'css-loader' ]
+      },
+      { 
+        test: /\.(eot|woff|woff2)$/, 
+        loader: "file-loader" 
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+        }
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin(HtmlWebpackPluginConfig),
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+      'window.jQuery': 'jquery',
+      Popper: ['popper.js', 'default']
+    })
+  ], 
+  devServer: {
+    contentBase: path.resolve(__dirname, "../dist"),
+    port: 3000, 
+    open: true, // open browser auto
+    index:'index.html', // like HtmlWebpackPlugin
+    inline:true, // default:true
+    hot:false,
+    compress:true // compress
+  }
+}