diff --git a/.eslintrc b/.eslintrc
index 8ce8de6..d94d5b9 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,5 +1,8 @@
 {
   "extends": "eslint-config-o2team",
+  "plugins": [
+    "vue"
+  ],
   "rules": {
     "no-multiple-empty-lines": [ 1,{ "max": 1 } ]
   }
diff --git a/app/package.json b/app/package.json
index 8c7179b..f5cb582 100644
--- a/app/package.json
+++ b/app/package.json
@@ -8,17 +8,17 @@
   "dependencies": {
     "compare-versions": "^3.0.0",
     "font-awesome": "^4.6.3",
-    "fs-extra": "^2.0.0",
+    "fs-extra": "^3.0.1",
     "lodash": "^4.17.2",
     "markdown": "^0.5.0",
     "moment": "^2.15.0",
     "request": "2.79.0",
     "shortid": "^2.2.6",
     "vue": "^2.3.2",
-    "vue-electron": "^1.0.0",
+    "vue-electron": "^1.0.6",
     "vue-router": "^2.5.3",
     "vuex": "^2.3.1",
-    "xlsx": "^0.8.0"
+    "xlsx": "^0.10.3"
   },
   "devDependencies": {}
 }
diff --git a/app/src/components/FirstScreenPageView/ExcelDisplay.vue b/app/src/components/FirstScreenPageView/ExcelDisplay.vue
index a1cf8f2..89e4f44 100644
--- a/app/src/components/FirstScreenPageView/ExcelDisplay.vue
+++ b/app/src/components/FirstScreenPageView/ExcelDisplay.vue
@@ -5,6 +5,7 @@
 			v-show="sheetNameList.length !== 0">
 			<ul>
 				<li v-for = "(sheetName, index) in sheetNameList"
+          :key="index"
 					:class="{'is_active': index == activeSheet.index}"
 					@click = "changeTab(index)">
 					<a href="javascript:;">
@@ -25,6 +26,7 @@
 				</p>
 			</div>
 			<sheet-of-excel v-for="(sheetName, index) in sheetNameList"
+        :key="index"
 				v-show="activeSheet.index === index"
 				:sheetHTML="sheetHTML">
 			</sheet-of-excel>
diff --git a/app/src/components/FirstScreenPageView/FilterTagList.vue b/app/src/components/FirstScreenPageView/FilterTagList.vue
index 7f5cf7d..303b3a1 100644
--- a/app/src/components/FirstScreenPageView/FilterTagList.vue
+++ b/app/src/components/FirstScreenPageView/FilterTagList.vue
@@ -9,6 +9,7 @@
 			v-if="uniqueCols[activeSheetName] && uniqueCols[activeSheetName].length > 0">
 		</unique-tag>
 		<filter-tag v-for="(filterTag, index) in filterTagList[activeSheetName]"
+      :key="index"
 			:filter-tag="filterTag"
 			:tag-index="index">
 		</filter-tag>
diff --git a/package.json b/package.json
index 439fd48..e8bc816 100644
--- a/package.json
+++ b/package.json
@@ -44,41 +44,43 @@
   "author": "AOTULabs <o2labs@qq.com>",
   "license": "MIT",
   "devDependencies": {
-    "babel-core": "^6.8.0",
-    "babel-loader": "^6.2.4",
-    "babel-plugin-transform-runtime": "^6.8.0",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-stage-0": "^6.5.0",
-    "babel-runtime": "^6.6.1",
-    "copy-webpack-plugin": "^2.1.6",
-    "cross-env": "^1.0.7",
-    "css-loader": "^0.23.1",
+     "babel-core": "^6.24.1",
+    "babel-loader": "^7.0.0",
+    "babel-plugin-transform-export-extensions": "^6.22.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "babel-runtime": "^6.23.0",
+    "copy-webpack-plugin": "^4.0.1",
+    "cross-env": "^5.0.0",
+    "css-loader": "^0.28.2",
     "del": "^2.2.1",
     "devtron": "^1.1.0",
-    "electron": "^1.6.7",
-    "electron-builder": "^7.18.0",
-    "electron-devtools-installer": "^1.1.4",
+    "electron": "^1.6.8",
+    "electron-builder": "^17.10.0",
+    "electron-devtools-installer": "^2.2.0",
     "electron-packager": "^8.7.0",
     "electron-rebuild": "^1.1.3",
     "eslint": "^3.19.0",
     "eslint-config-o2team": "^0.1.6",
     "eslint-friendly-formatter": "^3.0.0",
     "eslint-loader": "^1.7.1",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.8.5",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.11.1",
     "html-webpack-plugin": "^2.16.1",
     "json-loader": "^0.5.4",
-    "node-sass": "^3.10.1",
-    "sass-loader": "^4.0.2",
-    "style-loader": "^0.13.1",
+    "node-sass": "^4.5.3",
+    "sass-loader": "^6.0.5",
+    "style-loader": "^0.18.1",
     "tree-kill": "^1.1.0",
     "url-loader": "^0.5.7",
-    "vue-hot-reload-api": "^1.3.2",
+    "vue-hot-reload-api": "^2.1.0",
     "vue-html-loader": "^1.2.2",
-    "vue-loader": "^9.5.0",
-    "vue-style-loader": "^1.0.0",
-    "webpack": "^1.13.0",
-    "webpack-dev-server": "^1.14.1"
+    "vue-loader": "^12.1.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.3.3",
+    "webpack": "^2.6.0",
+    "webpack-dev-server": "^2.4.5"
   },
   "dependencies": {
     "lodash": "^4.16.6"
diff --git a/webpack.config.js b/webpack.config.js
index 9aa28ab..4bb4b60 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -8,44 +8,68 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 
-const config = {
-  devtool: '#eval-source-map',
-  entry: {
-    build: path.join(__dirname, 'app/src/main.js')
-  },
-  eslint: {
-    formatter: require('eslint-friendly-formatter'),
-    configFile: './.eslintrc'
-  },
-  module: {
-    preloaders: [
-      {
-        test: /\.js$/,
-        loader: 'babel!eslint',
-        exclude: /node_modules/
-      }
-    ],
-    loaders: [
-      {
-        test: /\.css$/,
-        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
+const isProd = process.env.NODE_ENV === 'production'
+module.exports = function () {
+  const config = {
+    entry: {
+      app: [path.join(__dirname, 'app/src/main.js')],
+      // vendor: [
+      //   'vue',
+      //   'vue-electron',
+      //   'vue-router',
+      //   'vuex'
+      // ]
+    },
+    output: {
+      path: path.join(__dirname, 'app/dist'),
+      filename: '[name].js',
+    },
+    resolve: {
+      extensions: ['.vue', '.json', '.css', '.js'],
+      alias: {
+        components: path.join(__dirname, 'app/src/components'),
+        src: path.join(__dirname, 'app/src')
       },
-      {
-        test: /\.html$/,
-        loader: 'vue-html-loader'
+      // modules: [
+      //   path.join(__dirname, 'app/node_modules')
+      // ]
+    },
+    resolveLoader: {
+      modules: [
+        path.join(__dirname, 'node_modules')
+      ]
+    },
+    module: {
+      rules: [{
+        test: /\.vue$/,
+        use: 'vue-loader',
+          // options: {
+          //   loaders: {
+          //     css: 'vue-style-loader!css-loader',
+          //     postcss: 'vue-style-loader!css-loader',
+          //     sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
+          //     scss: 'vue-style-loader!css-loader!sass-loader'
+          //   }
+          // }
       },
-      {
+      /* {
         test: /\.js$/,
-        loader: 'babel-loader',
+        use: 'babel!eslint',
         exclude: /node_modules/
-      },
+      }, */
       {
-        test: /\.json$/,
-        loader: 'json-loader'
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        include: [path.join(__dirname, 'app/src')],
+        options: {
+          formatter: require('eslint-friendly-formatter')
+        }
       },
       {
-        test: /\.vue$/,
-        loader: 'vue-loader'
+        test: /\.js$/,
+        use: 'babel-loader',
+        exclude: [new RegExp(`node_modules\\${path.sep}(?!vue-bulma-.*)`)]
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
@@ -62,79 +86,92 @@ const config = {
           limit: 10000,
           name: 'fonts/[name].[hash:7].[ext]'
         }
+      },
+      {
+        test: /\.html$/,
+        use: 'vue-html-loader'
+      },
+      {
+        test: /\.css$/,
+        loader: 'vue-style-loader!css-loader'
+      },
+      {
+        test: /\.sass$/,
+        loader: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
+      },
+      {
+        test: /\.scss$/,
+        loader: 'vue-style-loader!css-loader!sass-loader'
       }
-    ]
-  },
-  devServer: {
-    outputPath: path.join(__dirname, 'dist')
-  },
-  plugins: [
-    new ExtractTextPlugin('styles.css'),
-    new HtmlWebpackPlugin({
-      filename: 'index.html',
-      template: './app/main.ejs',
-      title: settings.name
-    }),
-    new webpack.NoErrorsPlugin(),
-    new CopyWebpackPlugin([
-      { from: path.join(__dirname, 'app/src/background'), to: path.join(__dirname, 'app/dist/background') },
-      { from: path.join(__dirname, 'app/src/update'), to: path.join(__dirname, 'app/dist/update') }
-    ])
-  ],
-  output: {
-    filename: '[name].js',
-    path: path.join(__dirname, 'app/dist')
-  },
-  resolve: {
-    alias: {
-      'components': path.join(__dirname, 'app/src/components'),
-      'src': path.join(__dirname, 'app/src')
+      ]
     },
-    extensions: ['', '.js', '.vue', '.json', '.css'],
-    fallback: [path.join(__dirname, 'app/node_modules')]
-  },
-  resolveLoader: {
-    root: path.join(__dirname, 'node_modules')
-  },
-  target: 'electron-renderer',
-  vue: {
-    autoprefixer: {
-      browsers: ['last 2 Chrome versions']
+    devtool: isProd ? '#source-map' : '#eval-source-map',
+    devServer: {
+      contentBase: path.join(__dirname, 'app/dist')
+      // watch: true,
+      // watchOptions: {
+      //   poll: true
+      // }
     },
-    loaders: {
-      sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
-      scss: 'vue-style-loader!css-loader!sass-loader',
-      js: 'babel!eslint'
-    }
-  },
-  node: {
-    fs: 'empty'
-  },
-  externals: [
-    {
+    plugins: [
+      new ExtractTextPlugin({
+        filename: 'styles.css',
+        disable: false,
+        allChunks: true
+      }),
+      new HtmlWebpackPlugin({
+        filename: 'index.html',
+        template: './app/main.ejs',
+        title: settings.name
+      }),
+      // new webpack.NoErrorsPlugin(),
+      new CopyWebpackPlugin([{
+        from: path.join(__dirname, 'app/src/background'),
+        to: path.join(__dirname, 'app/dist/background')
+      },
+      {
+        from: path.join(__dirname, 'app/src/update'),
+        to: path.join(__dirname, 'app/dist/update')
+      }
+      ])
+    ],
+    target: 'electron',
+    externals: [{
       './cptable': 'var cptable',
       '../xlsx.js': 'var _XLSX'
+    }],
+    node: {
+      fs: 'empty'
+    },
+    performance: {
+      hints: false
     }
-  ]
-}
+  }
 
-/**
- * Adjust config for production settings
- */
-if (process.env.NODE_ENV === 'production') {
-  config.devtool = ''
+  if (isProd) {
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        'process.env.NODE_ENV': '"production"'
+      })
+      // new webpack.optimize.OccurenceOrderPlugin()
+      // new webpack.optimize.UglifyJsPlugin({
+      //   compress: {
+      //     warnings: false
+      //   }
+      // })
+    )
+  } else {
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        'process.env.NODE_ENV': '"development"'
+      })
+      // new webpack.NoEmitOnErrorsPlugin(),
+      // new webpack.optimize.CommonsChunkPlugin({
+      //   name: 'vendor',
+      //   filename: 'vendor.js'
+      // })
+    )
+  }
 
-  config.plugins.push(
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': '"production"'
-    }),
-    new webpack.optimize.OccurenceOrderPlugin(),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    })
-  )
+  return config
 }
-
-module.exports = config