Update webpack to the latest version 🚀 (#92)

* chore(package): update webpack to version 4.6.0

Closes #78

* chore(package): Upgrade to latest webpack and dev server


Closes #82

Author: mrchief

package.json

@@ -23,12 +23,12 @@
   "author": "pandah <hrusikesh.panda@dowjones.com>",
   "license": "MIT",
   "scripts": {
-    "build": "rimraf dist/**/* && webpack --config webpack.config.js --bail",
-    "build:docs": "yarn build && webpack --config docs/webpack.config.js --bail",
+    "build": "rimraf dist/**/* && webpack --config webpack.config.js --bail --mode=production",
+    "build:docs": "yarn build && webpack --config docs/webpack.config.js --bail --mode=production",
     "commit": "git-cz",
     "commitmsg": "commitlint -e $GIT_PARAMS",
     "coveralls": "nyc npm test && nyc report --reporter=text-lcov | coveralls",
-    "demo": "webpack-dev-server --config docs/webpack.config.js",
+    "demo": "webpack-dev-server --mode=development --config docs/webpack.config.js",
     "prepublishOnly": "npm run build",
     "lint": "eslint src docs webpack.config.js && stylelint \"src/**/*.css\" --fix",
     "format": "prettier-eslint \"src/**/*.js\" \"docs/**/*.js\" webpack.config.js",
@@ -69,13 +69,13 @@
     "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.7.0",
-    "extract-text-webpack-plugin": "^3.0.2",
     "github-markdown-css": "^2.10.0",
     "husky": "^0.14.3",
     "ignore-styles": "^5.0.1",
     "jsdom": "^11.2.0",
     "jsdom-global": "^3.0.2",
     "marked": "^0.3.17",
+    "mini-css-extract-plugin": "^0.4.0",
     "nyc": "^11.2.1",
     "open": "^0.0.5",
     "postcss": "^6.0.16",
@@ -97,10 +97,10 @@
     "stylelint-config-standard": "^18.0.0",
     "travis-deploy-once": "^4.3.2",
     "url-loader": "^1.0.1",
-    "webpack": "^3.5.6",
+    "webpack": "^4.6.0",
     "webpack-bundle-analyzer": "^2.9.2",
     "webpack-cli": "^2.0.9",
-    "webpack-dev-server": "^2.9.4"
+    "webpack-dev-server": "^3.1.3"
   },
   "peerDependencies": {
     "react": "^15.0.0 || ^16.0.0"

webpack.config.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const webpack = require('webpack')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
 
 module.exports = {
@@ -23,12 +23,16 @@ module.exports = {
   },
   plugins: [
     new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
-    new ExtractTextPlugin('styles.css'),
-    new webpack
-      .optimize
-      .UglifyJsPlugin({ sourceMap: true, exclude: /node_modules/ }),
+    new MiniCssExtractPlugin({
+      // Options similar to the same options in webpackOptions.output
+      // both options are optional
+      filename: 'styles.css',
+      chunkFilename: '[id].css'
+    }),
     new BundleAnalyzerPlugin({
-      analyzerMode: 'static', openAnalyzer: false, generateStatsFile: true
+      analyzerMode: 'static',
+      openAnalyzer: false,
+      generateStatsFile: true
     })
   ],
   module: {
@@ -38,23 +42,23 @@ module.exports = {
         loaders: ['babel-loader'],
         include: path.join(__dirname, 'src'),
         exclude: /node_modules/
-      }, {
+      },
+      {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({
-          use: [
-            {
-              loader: 'css-loader',
-              options: {
-                localIdentName: 'react-dropdown-tree-select__[local]--[hash:base64:5]',
-                importLoaders: 1,
-                minimize: true
-              }
-            },
-            { loader: 'postcss-loader' }
-          ]
-        }),
         include: /src/,
-        exclude: /node_modules/
+        exclude: /node_modules/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              localIdentName: 'react-dropdown-tree-select__[local]--[hash:base64:5]',
+              importLoaders: 1,
+              minimize: true
+            }
+          },
+          { loader: 'postcss-loader' }
+        ]
       }
     ]
   }