From 4fa466157f33d64d8b0575cabc6e5571d7f2855b Mon Sep 17 00:00:00 2001 From: Tony Air Date: Thu, 23 May 2019 19:44:10 +0700 Subject: [PATCH] Webpack Upgrade --- package.json | 73 +++++++++++++++++++++------------------- webpack.config.common.js | 10 ++++++ webpack.config.dev.js | 3 +- webpack.config.prod.js | 33 +++++++++++++++--- 4 files changed, 78 insertions(+), 41 deletions(-) diff --git a/package.json b/package.json index 2f5a0c8..195e70d 100755 --- a/package.json +++ b/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-datepicker": "^1.8.0", + "bootstrap": "^4.3.1", + "bootstrap-confirmation2": "^4.1.0", + "bootstrap-datepicker": "^1.9.0", "bootstrap-offcanvas": "^1.0.0", - "bootstrap-select": "^1.13.2", - "bootstrap-timepicker": "^0.5.2", - "bootstrap-confirmation2": "^4.0.4", + "bootstrap-select": "^1.13.10", "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", - "jquery": "^3.3.1", + "gijgo": "^1.9.13", + "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", - "yarn": "^1.7.0" + "smooth-scroll": "^14.2.1", + "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", - "copy-webpack-plugin": "^4.3.1", + "browser-sync-webpack-plugin": "^2.2.2", + "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-jquery": "^1.3.1", - "eslint-plugin-react": "^7.8.2", + "eslint-plugin-import": "^2.17.2", + "eslint-plugin-jquery": "^1.5.0", + "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", - "laravel-mix": "^2.1.11", - "lost": "^8.2.0", - "node-sass": "^4.9.0", + "html-webpack-plugin": "^4.0.0-beta.5", + "laravel-mix": "^2.1.14", + "lost": "^8.3.1", + "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-dom": "^16.3.2", + "react": "^16.8.6", + "react-dom": "^16.8.6", "react-hot-loader": "^3.1.3", "redux": "^3.7.2", - "redux-devtools-extension": "^2.13.2", - "resolve-url-loader": "^2.2.1", - "rimraf": "^2.6.2", - "sass-lint": "^1.12.1", + "redux-devtools-extension": "^2.13.8", + "resolve-url-loader": "^2.3.2", + "rimraf": "^2.6.3", + "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-dev-server": "^2.11.1", + "webpack": "^4.32.2", + "webpack-cli": "^3.3.2", + "webpack-dev-server": "^3.4.1", "webpack-manifest-plugin": "^1.3.2", "webpack-merge": "^4.1.1" }, diff --git a/webpack.config.common.js b/webpack.config.common.js index e8ee053..fc11646 100755 --- a/webpack.config.common.js +++ b/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?$/, diff --git a/webpack.config.dev.js b/webpack.config.dev.js index 4bfb218..18f296c 100755 --- a/webpack.config.dev.js +++ b/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: { diff --git a/webpack.config.prod.js b/webpack.config.prod.js index 7882c08..7a63e6b 100755 --- a/webpack.config.prod.js +++ b/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: {