webpack, babel upgrade

Author: maddhruv

.babelrc

@@ -1,11 +1,9 @@
 {
-  "presets":[
-    "react",
-    ["es2015", {"loose": true}]
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
   ],
   "plugins": [
-    "transform-object-assign", 
-    "transform-object-rest-spread",
-    "transform-class-properties"
+    "@babel/plugin-proposal-class-properties"
   ]
 }

gulpfile.js

@@ -8,6 +8,8 @@ var WebpackDevServer = require("webpack-dev-server");
 var assign = require("object-assign");
 var opn = require("opn");
 
+var UglifyJsPlugin = require("uglifyjs-webpack-plugin");
+
 const DEV_PORT = 8080;
 
 gulp.task("clean", function() {
@@ -54,7 +56,7 @@ gulp.task(
 
 gulp.task(
   "server",
-  gulp.series(["watch", "copy", "sass"], function(done) {
+  gulp.series(["watch", "copy", "sass"], function() {
     console.log("Start");
     var myConfig = require("./webpack.config");
     myConfig.plugins = myConfig.plugins.concat(
@@ -68,8 +70,10 @@ gulp.task(
     new WebpackDevServer(webpack(myConfig), {
       contentBase: "./build",
       hot: true,
-      debug: true
-    }).listen(DEV_PORT, "0.0.0.0", function(err, result) {
+      stats: {
+        colors: true
+      }
+    }).listen(DEV_PORT, "localhost", function(err, result) {
       if (err) {
         console.log(err);
       } else {
@@ -78,7 +82,6 @@ gulp.task(
         opn(server_url);
       }
     });
-    done();
   })
 );
 
@@ -91,6 +94,7 @@ var distConfig = require("./webpack.config.dist.js");
 gulp.task("dist-unmin", function(cb) {
   var unminConfig = assign({}, distConfig);
   unminConfig.output.filename = "react-slick.js";
+  unminConfig.mode = "none";
   return webpack(unminConfig, function(err, stat) {
     console.error(err);
     cb();
@@ -101,8 +105,11 @@ gulp.task("dist-min", function(cb) {
   var minConfig = assign({}, distConfig);
   minConfig.output.filename = "react-slick.min.js";
   minConfig.plugins = minConfig.plugins.concat(
-    new webpack.optimize.UglifyJsPlugin({
-      compressor: {
+    new UglifyJsPlugin({
+      cache: true,
+      parallel: true,
+      sourceMap: true,
+      uglifyOptions: {
         warnings: false
       }
     })

package.json

@@ -32,18 +32,18 @@
     "react-component"
   ],
   "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.1.2",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/polyfill": "^7.0.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-react": "^7.0.0",
     "autoprefixer": "^7.1.2",
-    "babel-cli": "^6.16.0",
-    "babel-core": "^6.16.0",
-    "babel-eslint": "^7.0.0",
-    "babel-jest": "^19.0.0",
-    "babel-loader": "^6.2.5",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-assign": "^6.8.0",
-    "babel-polyfill": "^6.16.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^9.0.0",
+    "babel-jest": "^23.4.2",
+    "babel-loader": "^8.0.4",
     "babel-preset-airbnb": "^2.1.1",
-    "babel-preset-es2015": "^6.16.0",
-    "babel-preset-react": "^6.16.0",
     "css-loader": "^0.28.0",
     "deepmerge": "^1.1.0",
     "del": "^2.2.2",
@@ -76,8 +76,10 @@
     "sinon": "^2.1.0",
     "slick-carousel": "^1.8.1",
     "style-loader": "^0.16.1",
-    "webpack": "^1.13.2",
-    "webpack-dev-server": "^1.16.1",
+    "uglifyjs-webpack-plugin": "^2.0.1",
+    "webpack": "^4.21.0",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.9",
     "why-did-you-update": "^0.1.1"
   },
   "dependencies": {

webpack.config.dist.js

@@ -2,6 +2,8 @@ var webpack = require("webpack");
 var path = require("path");
 
 module.exports = {
+  mode: "production",
+
   entry: "./src/index",
 
   output: {
@@ -11,40 +13,45 @@ module.exports = {
   },
 
   module: {
-    loaders: [
-      { test: /\.jsx$/, loaders: ["babel"] },
-      { test: /\.js$/, loaders: ["babel"], exclude: /node_modules/ }
+    rules: [
+      {
+        test: /\.js/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: "babel-loader"
+        }
+      }
     ]
   },
 
   resolve: {
-    extensions: ["", ".js", ".jsx"]
+    extensions: [".js", ".jsx"]
   },
 
-  externals: [
-    {
-      react: {
-        root: "React",
-        commonjs2: "react",
-        commonjs: "react",
-        amd: "react"
-      },
-      "react-dom": {
-        root: "ReactDOM",
-        commonjs2: "react-dom",
-        commonjs: "react-dom",
-        amd: "react-dom"
-      }
+  externals: {
+    react: {
+      root: "React",
+      commonjs2: "react",
+      commonjs: "react",
+      amd: "react"
+    },
+    "react-dom": {
+      root: "ReactDOM",
+      commonjs2: "react-dom",
+      commonjs: "react-dom",
+      amd: "react-dom"
     }
-  ],
+  },
 
   node: {
     Buffer: false
   },
 
-  plugins: [
-    new webpack.DefinePlugin({
-      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV)
-    })
-  ]
+  devtool: "source-map",
+
+  performance: {
+    hints: "warning"
+  },
+
+  plugins: []
 };

webpack.config.js

@@ -1,41 +1,38 @@
 var webpack = require("webpack");
 var path = require("path");
-var autoprefixer = require("autoprefixer");
 
 module.exports = {
-  devtool: "#inline-source-map",
+  mode: "production",
+  devtool: "source-map",
   entry: {
-    "docs.js": [
-      "./docs/index.jsx"
-      // 'webpack/hot/only-dev-server',
-      // 'webpack-dev-server/client?http://localhost:8000'
-    ]
+    "docs.js": "./docs/index.jsx"
   },
   output: {
     path: path.join(__dirname, "build"),
     filename: "[name]"
   },
   module: {
-    loaders: [
-      { test: /\.jsx$/, loaders: ["babel"] },
-      { test: /\.js$/, loaders: ["babel"], exclude: /node_modules/ },
+    rules: [
       {
-        test: /\.scss$/,
-        loader:
-          "style!css!sass?outputStyle=expanded&" +
-          "includePaths[]=" +
-          path.resolve(__dirname, "./node_modules")
+        test: /\.jsx?/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: "babel-loader"
+        }
       },
-      { test: /\.md$/, loader: "html!markdown" }
+      {
+        test: /\.md$/,
+        loader: "html!markdown"
+      }
     ]
   },
-  postcss: [autoprefixer({ browsers: ["last 2 version"] })],
   resolve: {
-    extensions: ["", ".js", ".jsx"]
+    extensions: [".js", ".jsx"]
   },
-  plugins: [
-    // new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin(),
-    new webpack.IgnorePlugin(/vertx/)
-  ]
+  plugins: [new webpack.IgnorePlugin(/vertx/)],
+  devServer: {
+    contentBase: path.join(__dirname, "./build"),
+    port: 8080,
+    hot: true
+  }
 };