Webpack Upgrade

package.json

@@ -23,80 +23,85 @@
         "lint:sass": "sass-lint ./app/client/src --config .sasslintrc -v -q"
     },
     "dependencies": {
+        "@google/markerclusterer": "^1.0.3",
         "bootbox": "^4.4.0",
-        "bootstrap": "^4.1.1",
+        "bootstrap": "^4.3.1",
-        "bootstrap-datepicker": "^1.8.0",
+        "bootstrap-confirmation2": "^4.1.0",
+        "bootstrap-datepicker": "^1.9.0",
         "bootstrap-offcanvas": "^1.0.0",
-        "bootstrap-select": "^1.13.2",
+        "bootstrap-select": "^1.13.10",
-        "bootstrap-timepicker": "^0.5.2",
-	"bootstrap-confirmation2": "^4.0.4",
         "bootstrap-table": "^1.14.2",
+        "bootstrap-timepicker": "^0.5.2",
         "core-util-is": "^1.0.2",
+        "croppie": "^2.6.4",
+        "exif-js": "^2.3.0",
         "font-awesome": "^4.7.0",
         "foundation-emails": "^2.2.1",
-        "gijgo": "^1.9.7",
+        "gijgo": "^1.9.13",
-        "jquery": "^3.3.1",
+        "jquery": "^3.4.1",
         "jquery-hammerjs": "^2.0.0",
         "jquery-zoom": "^1.7.21",
         "jquery.appear": "^1.0.1",
-        "mapbox-gl": "^0.48.0",
         "meta-lightbox": "^1.0.0",
         "offcanvas-bootstrap": "^2.5.2",
-        "popper.js": "^1.14.3",
+        "popper.js": "^1.15.0",
         "pouchdb": "^6.4.3",
-        "react-bootstrap4-form-validation": "^1.0.5",
+        "quill": "^1.3.6",
+        "react-bootstrap4-form-validation": "^1.0.10",
         "routie": "0.0.1",
-        "smooth-scroll": "^14.2.0",
+        "smooth-scroll": "^14.2.1",
-        "yarn": "^1.7.0"
+        "webpack-cli": "^3.3.2",
+        "yarn": "^1.16.0"
     },
     "devDependencies": {
-        "animate.css": "^3.5.2",
+        "animate.css": "^3.7.0",
         "autoprefixer": "^7.2.5",
         "babel-core": "^6.26.3",
-        "babel-eslint": "^8.2.3",
+        "babel-eslint": "^8.2.6",
         "babel-loader": "^7.1.2",
         "babel-plugin-transform-react-jsx": "^6.24.1",
         "babel-preset-es2015": "^6.24.1",
         "babel-preset-react": "^6.24.1",
         "babel-preset-stage-2": "^6.24.1",
         "browser-sync": "^2.24.5",
-        "browser-sync-webpack-plugin": "^1.2.0",
+        "browser-sync-webpack-plugin": "^2.2.2",
-        "copy-webpack-plugin": "^4.3.1",
+        "copy-webpack-plugin": "^4.6.0",
         "copyfiles": "^1.2.0",
         "cross-env": "^5.1.6",
         "css-loader": "^0.28.9",
         "eslint": "^4.18.1",
-        "eslint-plugin-import": "^2.11.0",
+        "eslint-plugin-import": "^2.17.2",
-        "eslint-plugin-jquery": "^1.3.1",
+        "eslint-plugin-jquery": "^1.5.0",
-        "eslint-plugin-react": "^7.8.2",
+        "eslint-plugin-react": "^7.13.0",
         "exports-loader": "^0.7.0",
-        "extract-text-webpack-plugin": "^3.0.2",
+        "extract-text-webpack-plugin": "^4.0.0-beta.0",
         "favicons-webpack-plugin": "0.0.9",
         "file-loader": "^1.1.5",
-        "html-webpack-plugin": "^2.30.1",
+        "html-webpack-plugin": "^4.0.0-beta.5",
-        "laravel-mix": "^2.1.11",
+        "laravel-mix": "^2.1.14",
-        "lost": "^8.2.0",
+        "lost": "^8.3.1",
-        "node-sass": "^4.9.0",
+        "node-sass": "^4.12.0",
         "object-assign": "^4.1.1",
         "optimize-css-assets-webpack-plugin": "^4.0.1",
         "postcss-loader": "^2.1.5",
-        "react": "^16.3.2",
+        "react": "^16.8.6",
-        "react-dom": "^16.3.2",
+        "react-dom": "^16.8.6",
         "react-hot-loader": "^3.1.3",
         "redux": "^3.7.2",
-        "redux-devtools-extension": "^2.13.2",
+        "redux-devtools-extension": "^2.13.8",
-        "resolve-url-loader": "^2.2.1",
+        "resolve-url-loader": "^2.3.2",
-        "rimraf": "^2.6.2",
+        "rimraf": "^2.6.3",
-        "sass-lint": "^1.12.1",
+        "sass-lint": "^1.13.1",
         "sass-lint-fix": "^1.12.1",
         "sass-loader": "^6.0.6",
-        "script-ext-html-webpack-plugin": "^1.8.8",
+        "script-ext-html-webpack-plugin": "^2.1.3",
         "style-loader": "^0.19.0",
         "svg-url-loader": "^2.3.1",
-        "uglifyjs-webpack-plugin": "^1.2.5",
+        "uglify-js": "git://github.com/mishoo/UglifyJS2.git#harmony-v2.8.22",
         "url-loader": "^0.6.2",
-        "webpack": "^3.12.0",
+        "webpack": "^4.32.2",
-        "webpack-dev-server": "^2.11.1",
+        "webpack-cli": "^3.3.2",
+        "webpack-dev-server": "^3.4.1",
         "webpack-manifest-plugin": "^1.3.2",
         "webpack-merge": "^4.1.1"
     },

webpack.config.common.js

@@ -90,6 +90,16 @@ module.exports = {
     externals: {
         'jquery': 'jQuery',
     },
+    optimization: {
+        namedModules: true, // NamedModulesPlugin()
+        splitChunks: { // CommonsChunkPlugin()
+            name: 'vendor',
+            minChunks: 2
+        },
+        noEmitOnErrors: true, // NoEmitOnErrorsPlugin
+        concatenateModules: true //ModuleConcatenationPlugin
+    },
+
     module: {
         rules: [{
             test: /\.jsx?$/,

webpack.config.dev.js

@@ -16,6 +16,7 @@ const PORT = process.env.PORT || conf.PORT;
 const config = merge.strategy({
     entry: 'prepend'
 })(common, {
+    mode: 'development',
 
     entry: {
         app: [
@@ -91,9 +92,7 @@ const config = merge.strategy({
         }]
     },
     plugins: [
-        new webpack.NamedModulesPlugin(),
         new webpack.HotModuleReplacementPlugin(),
-        new webpack.NoEmitOnErrorsPlugin(),
     ],
 
     devServer: {

webpack.config.prod.js

@@ -14,6 +14,7 @@ const autoprefixer = require('autoprefixer');
 
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 
 let plugins = [
     new webpack.DefinePlugin({
@@ -25,19 +26,18 @@ let plugins = [
         minimize: true,
         debug: false
     }),
-    new webpack.optimize.ModuleConcatenationPlugin(),
-    new webpack.optimize.UglifyJsPlugin({
-        sourceMap: false,
-        comments: false
-    }),
     new ExtractTextPlugin({
         filename: 'css/[name].css',
         allChunks: true
     }),
 
     new FaviconsWebpackPlugin({
+        title: 'Webpack App',
         logo: path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png'),
         prefix: '/icons/',
+        emitStats: false,
+        persistentCache: true,
+        inject: false,
         statsFilename: path.join(conf.APPDIR, conf.DIST, 'icons', 'iconstats.json'),
         icons: {
             android: true,
@@ -59,8 +59,12 @@ commonVariables.themes.forEach((theme) => {
     const faviconPath = path.join(__dirname, theme, conf.SRC, 'favicon.png');
     if (filesystem.existsSync(faviconPath)) {
         plugins.push(new FaviconsWebpackPlugin({
+            title: 'Webpack App',
             logo: faviconPath,
             prefix: '/' + theme + '-icons/',
+            emitStats: false,
+            persistentCache: true,
+            inject: false,
             statsFilename: path.join(conf.APPDIR, conf.DIST, theme + '-icons', 'iconstats.json'),
             icons: {
                 android: true,
@@ -79,6 +83,25 @@ commonVariables.themes.forEach((theme) => {
 });
 
 module.exports = merge(common, {
+    mode: 'production',
+    optimization: {
+        namedModules: true, // NamedModulesPlugin()
+        splitChunks: { // CommonsChunkPlugin()
+            name: 'vendor',
+            minChunks: 2
+        },
+        noEmitOnErrors: true, // NoEmitOnErrorsPlugin
+        concatenateModules: true, //ModuleConcatenationPlugin
+        minimizer: [
+            new UglifyJSPlugin({
+                uglifyOptions: {
+                    sourceMap: false,
+                    comments: false
+                }
+            })
+        ]
+    },
+
     devtool: '',
 
     output: {