From 6f63c3a7c86a85e0f29a30663c77ee57d12d7e37 Mon Sep 17 00:00:00 2001 From: DPTeamMember Date: Mon, 24 May 2021 19:02:58 +0530 Subject: [PATCH] Upgrade to webpack 4 --- .eslintrc.yml | 3 +- package.json | 18 ++++---- webpack/config.js | 1 + webpack/plugins/extractPlugin.js | 4 +- webpack/plugins/internal.js | 79 ++++++++++++++++---------------- webpack/rules/css.js | 12 +++-- 6 files changed, 61 insertions(+), 56 deletions(-) diff --git a/.eslintrc.yml b/.eslintrc.yml index 4ed3907..39709fe 100755 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -2,8 +2,7 @@ extends: airbnb-base - parser: - @babel/eslint-parser + parser: "@babel/eslint-parser" settings: ecmascript: 7 diff --git a/package.json b/package.json index 569ce4e..0180410 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,8 @@ "start": "webpack-dev-server", "dev": "webpack-dashboard -t 'Project' -- webpack-dev-server", "clean": "shx rm -rf ./build", - "build": "npm run clean && cross-env NODE_ENV=\"production\" webpack", - "preview": "cross-env NODE_ENV=\"production\" webpack-dev-server", + "build": "npm run clean && cross-env webpack", + "preview": "cross-env webpack-dev-server", "lint:js": "eslint ./src ./webpack ./*.js -f table --ext .js --ext .jsx", "lint:scss": "stylelint ./src/**/*.scss --syntax scss", "lint": "npm run lint:js && npm run lint:scss" @@ -25,26 +25,28 @@ "babel-preset-env": "^1.7.0", "babel-preset-stage-0": "^6.24.1", "case-sensitive-paths-webpack-plugin": "^2.4.0", - "copy-webpack-plugin": "^4.6.0", + "copy-webpack-plugin": "^5.1.1", "cross-env": "^7.0.3", - "css-loader": "^0.28.11", + "css-loader": "^1.0.1", "eslint": "^7.21.0", "eslint-config-airbnb-base": "^14.2.1", "eslint-plugin-import": "2.22.1", "extract-text-webpack-plugin": "^3.0.2", - "html-webpack-plugin": "^3.2.0", + "html-webpack-plugin": "^4.0.0", "imagemin-webpack-plugin": "^2.4.2", + "mini-css-extract-plugin": "^0.8.0", "node-sass": "^4.14.1", "postcss-loader": "^3.0.0", "postcss-preset-env": "^6.7.0", "sass-loader": "^7.3.1", "shx": "^0.3.3", - "style-loader": "^0.23.1", + "style-loader": "^1.3.0", "stylelint": "^13.11.0", "stylelint-config-standard": "^20.0.0", - "webpack": "^3.10.0", + "webpack": "^4.46.0", + "webpack-cli": "^3.3.12", "webpack-dashboard": "^3.3.1", - "webpack-dev-server": "^2.11.5" + "webpack-dev-server": "^3.11.2" }, "dependencies": { "babel-polyfill": "^6.26.0", diff --git a/webpack/config.js b/webpack/config.js index 11e03d9..2c5a9a2 100755 --- a/webpack/config.js +++ b/webpack/config.js @@ -54,6 +54,7 @@ module.exports = { context: path.join(manifest.paths.src, manifest.entries.js), watch: !manifest.IS_PRODUCTION, entry, + mode: manifest.NODE_ENV, output: { path: manifest.paths.build, publicPath: '', diff --git a/webpack/plugins/extractPlugin.js b/webpack/plugins/extractPlugin.js index eee87aa..1ffb3b1 100755 --- a/webpack/plugins/extractPlugin.js +++ b/webpack/plugins/extractPlugin.js @@ -1,8 +1,8 @@ const manifest = require('../manifest'), - ExtractTextPlugin = require('extract-text-webpack-plugin'); + ExtractTextPlugin = require('mini-css-extract-plugin'); module.exports = new ExtractTextPlugin({ filename: manifest.outputFiles.css, - allChunks: true, + // allChunks: true, }); diff --git a/webpack/plugins/internal.js b/webpack/plugins/internal.js index 4909e09..01a70bc 100755 --- a/webpack/plugins/internal.js +++ b/webpack/plugins/internal.js @@ -28,20 +28,21 @@ const plugins = []; plugins.push( - new webpack.DefinePlugin({ - 'process.env': { - NODE_ENV: JSON.stringify(manifest.NODE_ENV), - }, - }), - - new webpack.optimize.CommonsChunkPlugin({ - name: 'vendor', - filename: manifest.outputFiles.vendor, - minChunks(module) { - const { context } = module; - return context && context.indexOf('node_modules') >= 0; - }, - }), + // new webpack.DefinePlugin({ + // 'process.env': { + // NODE_ENV: JSON.stringify(manifest.NODE_ENV), + // }, + // }), + + + // new webpack.optimize.CommonsChunkPlugin({ + // name: 'vendor', + // filename: manifest.outputFiles.vendor, + // minChunks(module) { + // const { context } = module; + // return context && context.indexOf('node_modules') >= 0; + // }, + // }), new webpack.ProvidePlugin({ $: 'jquery', @@ -56,29 +57,29 @@ plugins.push( // @Merging Production Plugins // --------------------------- -if (manifest.IS_PRODUCTION) { - plugins.push( - new webpack.optimize.UglifyJsPlugin({ - compress: { - comparisons : true, - conditionals : true, - dead_code : true, - drop_debugger : true, - evaluate : true, - if_return : true, - join_vars : true, - screw_ie8 : true, - sequences : true, - unused : true, - warnings : false, - }, - - output: { - comments: false, - }, - }) - ); -} +// if (manifest.IS_PRODUCTION) { +// plugins.push( +// new webpack.optimize.UglifyJsPlugin({ +// compress: { +// comparisons : true, +// conditionals : true, +// dead_code : true, +// drop_debugger : true, +// evaluate : true, +// if_return : true, +// join_vars : true, +// screw_ie8 : true, +// sequences : true, +// unused : true, +// warnings : false, +// }, + +// output: { +// comments: false, +// }, +// }) +// ); +// } // ---------------------------- @@ -87,8 +88,8 @@ if (manifest.IS_PRODUCTION) { if (manifest.IS_DEVELOPMENT) { plugins.push( - new webpack.NoEmitOnErrorsPlugin(), - new webpack.NamedModulesPlugin(), + // new webpack.NoEmitOnErrorsPlugin(), + // new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin() ); } diff --git a/webpack/rules/css.js b/webpack/rules/css.js index e63e96b..22222d3 100755 --- a/webpack/rules/css.js +++ b/webpack/rules/css.js @@ -17,7 +17,7 @@ const manifest = require('../manifest'), - ExtractTextPlugin = require('extract-text-webpack-plugin'); + ExtractTextPlugin = require('mini-css-extract-plugin'); // --------------- @@ -31,7 +31,8 @@ const loaders = [ loader: 'css-loader', options: { sourceMap : manifest.IS_DEVELOPMENT, - minimize : manifest.IS_PRODUCTION, + // minimize : manifest.IS_PRODUCTION, + importLoaders: 1, }, }, ]; @@ -44,9 +45,10 @@ const loaders = [ if (manifest.IS_PRODUCTION) { rule = { test: /\.css$/, - loader: ExtractTextPlugin.extract({ - use: loaders, - }), + // loader: ExtractTextPlugin({ + // use: loaders, + // }), + use: [ExtractTextPlugin.loader, loaders], }; }