diff --git a/.babelrc b/.babelrc
index 51c93f9..fac3e20 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,8 +1,10 @@
 {
-  "presets": ["env", "react"],
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
   "plugins": [
-    "transform-class-properties",
-    "transform-object-rest-spread",
-    "add-module-exports"
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread"
   ]
 }
diff --git a/demo/Main.jsx b/demo/Main.jsx
index dc8e28b..f1a120d 100644
--- a/demo/Main.jsx
+++ b/demo/Main.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import AdSense from 'react-adsense';
+// import AdSense from 'react-adsense';
 import Gantt from './Gantt';
 
 export default class Main extends Component {
@@ -12,7 +12,7 @@ export default class Main extends Component {
           <a href='https://github.com/hustcc/gantt-for-react'>hustcc/gantt-for-react</a>
         </h3>
 
-        <AdSense.Google client='ca-pub-7292810486004926' slot='7806394673' />
+        {/*<AdSense.Google client='ca-pub-7292810486004926' slot='7806394673' />*/}
 
         <Gantt />
 
diff --git a/demo/index.jsx b/demo/index.jsx
index fc1cb06..d1b30e7 100644
--- a/demo/index.jsx
+++ b/demo/index.jsx
@@ -1,4 +1,4 @@
-import "babel-polyfill";
+import "@babel/polyfill";
 import React from 'react';
 import ReactDOM from 'react-dom';
 
diff --git a/package.json b/package.json
index d7ff5f5..88bd852 100644
--- a/package.json
+++ b/package.json
@@ -6,9 +6,9 @@
   "scripts": {
     "clean": "rimraf lib && rimraf demo/dist",
     "precommit": "npm run build",
-    "start": "webpack-dev-server --watch",
+    "start": "webpack serve --config webpack.config.js",
     "demo": "webpack",
-    "dev": "webpack --watch",
+    "dev": "webpack --config webpack.config.js",
     "build": "npm run clean && cross-env NODE_ENV=production babel src -d lib && npm run demo"
   },
   "repository": {
@@ -35,34 +35,34 @@
   },
   "homepage": "https://github.com/hustcc/gantt-for-react",
   "dependencies": {
-    "frappe-gantt": "^0.2.0",
-    "size-sensor": "^0.2.0"
+    "frappe-gantt": "^0.5.0",
+    "size-sensor": "^1.0.1"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.5",
-    "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
-    "cross-env": "^5.1.5",
-    "css-loader": "^0.28.7",
-    "husky": "^0.14.3",
-    "node-sass": "^4.9.2",
-    "react": "^16.0.0",
-    "react-adsense": "^0.0.6",
-    "react-dom": "^16.0.0",
-    "rimraf": "^2.6.2",
-    "sass-loader": "^7.0.3",
-    "style-loader": "^0.21.0",
-    "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.9.7"
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+    "@babel/plugin-transform-react-jsx": "^7.12.12",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-react": "^7.12.10",
+    "babel-loader": "^8.2.2",
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.0.1",
+    "husky": "^4.3.8",
+    "node-sass": "^5.0.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "rimraf": "^3.0.2",
+    "sass-loader": "^10.1.1",
+    "style-loader": "^2.0.0",
+    "webpack": "^5.15.0",
+    "webpack-cli": "^4.3.1",
+    "webpack-dev-server": "^3.11.2"
   },
   "peerDependencies": {
-    "react": "^15.0.0 || ^16.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
index 5fdfe5c..d6b499f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -4,19 +4,20 @@ var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
 var definePlugin = webpack.DefinePlugin;
 
 module.exports = {
+  mode: "production",
   entry: './demo/index.jsx',
   output: {
     path: path.resolve(__dirname, './demo/dist'),
     filename: 'bundle.js'
   },
   module: {
-    loaders:[{
+    rules:[{
       test: /\.js[x]?$/,
       exclude: /node_modules/,
       loader: 'babel-loader'
     }, {
       test: /\.css$/,
-      loader: 'style-loader!css-loader'
+      use: ['style-loader', 'css-loader'],
     }, {
       test: /\.scss$/,
       use: [