diff --git a/README.md b/README.md
index 3bcd323..4938050 100644
--- a/README.md
+++ b/README.md
@@ -30,7 +30,7 @@ npm i h5-imageviewer
 
 Or get it from CDN:
 
-[https://unpkg.com/h5-imageviewer@0.7.5/umd/h5-imageviewer.js](https://unpkg.com/h5-imageviewer@0.7.5/umd/h5-imageviewer.js)
+[https://unpkg.com/h5-imageviewer@0.7.7/umd/h5-imageviewer.js](https://unpkg.com/h5-imageviewer@0.7.7/umd/h5-imageviewer.js)
 
 # Usage
 Show single image viewer
diff --git a/package.json b/package.json
index d8f2117..0284ffd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "h5-imageviewer",
-  "version": "0.7.5",
+  "version": "0.7.7",
   "description": "Image viewer for mobile browser, supported React/Vue/AngularJS.",
   "main": "bundle.js",
   "files": [
diff --git a/public/cdn-test.html b/public/cdn-test.html
index caf3000..d7a35da 100644
--- a/public/cdn-test.html
+++ b/public/cdn-test.html
@@ -5,14 +5,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">  
   <meta name="format-detection" content="telephone=no">
   <title>H5 mobile image viewer</title>
-  <script src="https://unpkg.com/h5-imageviewer@0.7.5/umd/h5-imageviewer.js"></script>
+  <script src="https://unpkg.com/h5-imageviewer@0.7.7/umd/h5-imageviewer.js"></script>
   <script src="./vconsole.min.js"></script>
   <script>
     // init vConsole
     var vConsole = new VConsole();
     function showImage() {
       H5ImageViewer.showViewer(
-        {src: 'http://localhost:8080/737a71084999bb9ee329f7afead08564.jpg'},
+        {src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp4.itc.cn%2Fimages03%2F20200524%2Fd9956119bbf14507ad0da4b2eb5ebaf2.jpeg&refer=http%3A%2F%2Fp4.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630825813&t=9ab51af91811885dfbc0bbd62a350b4a'},
         {
           onPageChanged: pageIndex => {
             console.log('onPageChanged', pageIndex)
@@ -23,8 +23,8 @@
     function showImageList() {
       H5ImageViewer.showImgListViewer(
         [
-          {src: 'http://localhost:8080/737a71084999bb9ee329f7afead08564.jpg'},
-          {src: 'http://localhost:8080/2e0036ab635f5b7dbcef2ca82b1cdca5.jpg'}
+          {src: 'https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/78310a55b319ebc4cbd4c3e68226cffc1e171624.jpg'},
+          {src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yxbao.com%2Fpic%2F201304%2F27%2F1367051246_775420415_2c.jpg&refer=http%3A%2F%2Fimg.yxbao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630825813&t=6071ac7ff2a42786d351d2c3cb3fa9f5'}
         ],
         {
           onPageChanged: pageIndex => {
diff --git a/webpack.common.js b/webpack.common.js
new file mode 100644
index 0000000..a27bd62
--- /dev/null
+++ b/webpack.common.js
@@ -0,0 +1,44 @@
+const rules = [
+  {
+    test: /.js$/,
+    use: 'babel-loader'
+  },
+  {
+    test: /.css$/,
+    use: [
+      'style-loader',
+      'css-loader'
+    ]
+  },
+  {
+    test: /.less$/,
+    use: [
+      'style-loader',
+      'css-loader',
+      'less-loader',
+      {
+        // css3前缀自动补全
+        loader: 'postcss-loader',
+        options: {
+          plugins: () => [
+            require('autoprefixer')({})
+          ]
+        }
+      }
+    ]
+  },
+  {
+    test: /.(jpg|png|gif|jpeg)$/,
+    use: [
+      {
+        loader: 'url-loader',
+        options: {
+          limit: 10240,
+          name: '[name]_[hash:8].[ext]'
+        }
+      }
+    ]
+  }
+]
+
+module.exports = { rules }
diff --git a/webpack.dev.js b/webpack.dev.js
index 4dec4fa..3af0602 100644
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -4,6 +4,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 const OpenBrowserPlugin = require('open-browser-webpack-plugin')
 const CopyPlugin = require('copy-webpack-plugin')
+const { rules } = require('./webpack.common')
 
 module.exports = {
   mode: 'development',
@@ -15,47 +16,7 @@ module.exports = {
     filename: '[name].js'
   },
   module: {
-    rules: [
-      {
-        test: /.js$/,
-        use: 'babel-loader'
-      },
-      {
-        test: /.css$/,
-        use: [
-          'style-loader',
-          'css-loader'
-        ]
-      },
-      {
-        test: /.less$/,
-        use: [
-          'style-loader',
-          'css-loader',
-          'less-loader',
-          {
-            // css3前缀自动补全
-            loader: 'postcss-loader',
-            options: {
-              plugins: () => [
-                require('autoprefixer')({})
-              ]
-            }
-          }
-        ]
-      },
-      {
-        test: /.(jpg|png|gif|jpeg)$/,
-        use: [
-          {
-            loader: 'url-loader',
-            options: {
-              limit: 10240
-            }
-          }
-        ]
-      }
-    ]
+    rules
   },
   plugins: [
     new CleanWebpackPlugin(),
diff --git a/webpack.preview.js b/webpack.preview.js
index 5d41e2d..2c1135a 100644
--- a/webpack.preview.js
+++ b/webpack.preview.js
@@ -2,6 +2,7 @@ const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const { rules } = require('./webpack.common')
 
 module.exports = {
   mode: 'production',
@@ -12,49 +13,7 @@ module.exports = {
     filename: '[name]_[hash:8].js'
   },
   module: {
-    rules: [
-      {
-        test: /.js$/,
-        use: 'babel-loader'
-      },
-      {
-        test: /.css$/,
-        use: [
-          'style-loader',
-          'css-loader'
-        ]
-      },
-      {
-        test: /.less$/,
-        use: [
-          'style-loader',
-          'css-loader',
-          'less-loader',
-          {
-            // css3前缀自动补全
-            loader: 'postcss-loader',
-            options: {
-              plugins: () => [
-                require('autoprefixer')({})
-              ]
-            }
-          }
-        ]
-      },
-      {
-        test: /.(jpg|png|gif|jpeg)$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              limit: 10240,
-              // 文件内容hash
-              name: '[name]_[hash:8].[ext]'
-            }
-          }
-        ]
-      }
-    ]
+    rules
   },
   plugins: [
     new CleanWebpackPlugin(),
diff --git a/webpack.pro.js b/webpack.pro.js
index 5060efd..07dd0a6 100644
--- a/webpack.pro.js
+++ b/webpack.pro.js
@@ -2,6 +2,7 @@ const path = require('path')
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 const nodeExternals = require('webpack-node-externals')
+const { rules } = require('./webpack.common')
 
 module.exports = {
   mode: 'production',
@@ -12,49 +13,7 @@ module.exports = {
     libraryTarget: 'commonjs2'
   },
   module: {
-    rules: [
-      {
-        test: /.js$/,
-        use: 'babel-loader'
-      },
-      {
-        test: /.css$/,
-        use: [
-          'style-loader',
-          'css-loader'
-        ]
-      },
-      {
-        test: /.less$/,
-        use: [
-          'style-loader',
-          'css-loader',
-          'less-loader',
-          {
-            // css3前缀自动补全
-            loader: 'postcss-loader',
-            options: {
-              plugins: () => [
-                require('autoprefixer')({})
-              ]
-            }
-          }
-        ]
-      },
-      {
-        test: /.(jpg|png|gif|jpeg)$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              limit: 10240,
-              // 文件内容hash
-              name: '[name]_[hash:8].[ext]'
-            }
-          }
-        ]
-      }
-    ]
+    rules
   },
   externals: [nodeExternals()],
   plugins: [
diff --git a/webpack.pro.script.js b/webpack.pro.script.js
index 0c3a762..bd64d20 100644
--- a/webpack.pro.script.js
+++ b/webpack.pro.script.js
@@ -1,8 +1,7 @@
 const path = require('path')
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
-const nodeExternals = require('webpack-node-externals')
-const { version } = require('./package.json')
+const { rules } = require('./webpack.common')
 
 module.exports = {
   mode: 'production',
@@ -15,49 +14,7 @@ module.exports = {
     library: "H5ImageViewer"
   },
   module: {
-    rules: [
-      {
-        test: /.js$/,
-        use: 'babel-loader'
-      },
-      {
-        test: /.css$/,
-        use: [
-          'style-loader',
-          'css-loader'
-        ]
-      },
-      {
-        test: /.less$/,
-        use: [
-          'style-loader',
-          'css-loader',
-          'less-loader',
-          {
-            // css3前缀自动补全
-            loader: 'postcss-loader',
-            options: {
-              plugins: () => [
-                require('autoprefixer')({})
-              ]
-            }
-          }
-        ]
-      },
-      {
-        test: /.(jpg|png|gif|jpeg)$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              limit: 10240,
-              // 文件内容hash
-              name: '[name]_[hash:8].[ext]'
-            }
-          }
-        ]
-      }
-    ]
+    rules
   },
   plugins: [
     new CleanWebpackPlugin(),