feat: migrate to webpack 5 (#9)

BREAKING CHANGE: for `webpack@4` use `@stackr23/webpack@2` * deps: upgrade webpack packages `webpack`, `webpack-cli`, `webpack-dev-server`, `webpack-merge` * deps: upgrade other webpack releated pckgs * webpack-helpers: `copy-webpack-plugin`, `html-webpack-plugin`, `mini-css-extract-plugin` * webpack-loaders: `loader-utils`, `css-loader`, `postcss-loader"`, `sass-loader`, `source-map-loader`, `style-loader` * deps: upgrade `karma-webpack` to v5 * deps: update post-css packages * refactor(webpack-merge): migrate to new version * refactor: migrate `post-css` options to v8 * refactor: migrate options to webpack v5 * `splitChunks.cacheGroups.vendors` → `splitChunks.cacheGroups.defaultVendors` * change `sass-loader`s 'query' key to 'options' * refactor: remove `addEnvVariables()` in merge fn TODO: refactor mode/env (#4) * config(npm): remove `-p` from webpack commands * config(test): use `NODE_ENV` in karma.webpack.mode * test(assets): remove __esModule' import test closes #10
stackr23 · May 4, 2022 · 25eb889 · 25eb889
1 parent 7997f42
commit 25eb889
Show file tree

Hide file tree

Showing 10 changed files with 2,408 additions and 3,508 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,8 +6,8 @@
   "scripts": {
     "clean": "rimraf build && rimraf bundle",
     "start": "cross-env WEBPACK_PATH=test webpack-dev-server --open --mode development --env development_core",
-    "build": "npm run clean && cross-env WEBPACK_PATH=test NODE_ENV=production webpack -p --mode production --env production",
-    "watch": "cross-env WEBPACK_PATH=test NODE_ENV=production webpack --watch -p --mode production --env production",
+    "build": "npm run clean && cross-env WEBPACK_PATH=test NODE_ENV=production webpack --mode production --env production",
+    "watch": "cross-env WEBPACK_PATH=test NODE_ENV=production webpack --watch --mode production --env production",
     "test": "npm run lint && npm run build && npm run karma",
     "karma": "cross-env WEBPACK_PATH=test karma start ./src/test/karma.config.js",
     "lint": "cross-env WEBPACK_PATH=test eslint --fix --quiet \"**/*.*{js,jsx,ts,tsx}\" --ignore-pattern \"build/**/*\"",
@@ -81,14 +81,14 @@
     "body-parser": "^1.19.0",
     "chai": "^4.2.0",
     "chai-enzyme": "^1.0.0-beta.1",
-    "copy-webpack-plugin": "^9.0.1",
+    "copy-webpack-plugin": "^10.0.0",
     "core-js": "^3.6.4",
-    "css-loader": "^5.2.7",
+    "css-loader": "^6.5.1",
     "dotenv-webpack": "^7.0.3",
     "enzyme": "^3.11.0",
     "express-useragent": "^1.0.13",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^5.5.0",
     "install": "^0.13.0",
     "ip": "^1.1.5",
     "karma": "^4.4.1",
@@ -101,34 +101,34 @@
     "karma-nyan-reporter": "^0.2.5",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-typescript": "^5.5.1",
-    "karma-webpack": "^4.0.2",
-    "loader-utils": "^1.4.0",
-    "mini-css-extract-plugin": "^1.6.2",
+    "karma-webpack": "^5.0.0",
+    "loader-utils": "^3.2.0",
+    "mini-css-extract-plugin": "^2.4.5",
     "mocha": "^7.1.2",
     "node-port-check": "^2.0.1",
     "node-sass": "^6.0.1",
     "npm": "^6.14.4",
-    "postcss": "^8.3.11",
-    "postcss-import": "^14.0.2",
-    "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.7.0",
+    "postcss": "^8.4.13",
+    "postcss-import": "^14.1.0",
+    "postcss-loader": "^6.2.1",
+    "postcss-preset-env": "^7.5.0",
     "puppeteer": "^2.1.1",
     "qrcode-terminal": "^0.12.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hot-loader": "^4.12.20",
     "regenerator-runtime": "^0.13.5",
     "sass": "^1.43.4",
-    "sass-loader": "^9.0.3",
-    "source-map-loader": "^1.1.3",
-    "style-loader": "^2.0.0",
+    "sass-loader": "^12.3.0",
+    "source-map-loader": "^3.0.0",
+    "style-loader": "^3.3.1",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
     "typescript": "^3.8.3",
     "url-loader": "^4.1.1",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.11.0",
-    "webpack-merge": "^4.2.2"
+    "webpack": "^5.64.4",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.6.0",
+    "webpack-merge": "^5.8.0"
   },
   "devDependencies": {
     "@stackr23/config-eslint": "^2.0.0",

diff --git a/src/test/karma.config.js b/src/test/karma.config.js
@@ -67,7 +67,7 @@ module.exports = (config) => {
     // overwrite 'webpack' configuration
     webpack: {
       ...configCommon,
-      mode:      'development',
+      mode:      process.env.NODE_ENV || 'production',
       devtool:   'inline-source-map',
       externals: {
         domutils: 'true',

diff --git a/src/types/react/common.config.js b/src/types/react/common.config.js
@@ -2,7 +2,7 @@
 // react-svg-loader for ui and icons -> JSX output
 // svgo into file-loader for svg assets (content images)
 const path = require('path')
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const { CheckerPlugin } = require('awesome-typescript-loader')
@@ -37,25 +37,33 @@ const getCommonConfig = (env) =>
               {
                 loader:  'postcss-loader',
                 options: {
-                  ident:   'postcss',
-                  plugins: (loader) => [ require('postcss-preset-env')() ],
+                  postcssOptions: {
+                    plugins: [
+                      [
+                        'postcss-preset-env',
+                        {
+                          // Options
+                        },
+                      ],
+                    ],
+                  },
                 },
               },
               {
-                loader: 'sass-loader',
-                query:  {
+                loader:  'sass-loader',
+                options:  {
                   sourceMap:   true,
                   sassOptions: {
                     includePaths: [
                       './sass',
                       `${path.basename(PATHS.src)}/sass`,
                       './css', // ! compatibility with old setting
                       // TODO: ? use sass-resource-loader
-                      // TODO: apply @stackr23/stylus
                     ],
                   },
                 },
               },
+              // TODO: add stylus-loader and apply @stackr23/stylus
             ],
           },
           {

diff --git a/src/types/react/develop.config.js b/src/types/react/develop.config.js
@@ -1,4 +1,4 @@
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
 const ip = require('ip').address()
 const webpack = require('webpack')
 
@@ -13,19 +13,29 @@ const getDevelopConfig = () => {
   return merge([
     {
       devServer: {
-        'public':    ip ? `${ip}:${PORT}` : null,
-        host:        process.env.HOST || '0.0.0.0',
-        port:        PORT,
-        contentBase: PATHS.build,
-        hot:         true,
-        overlay:     {
-          warnings: false,
-          errors:   true,
+        host:               'local-ip',
+        port:               PORT,
+        // contentBase:        PATHS.build, // deprecated... substitute not needed!?!?
+        hot:                true,
+        liveReload:         false,
+        compress:           true,
+        magicHtml:          true,
+        open:               true,
+        historyApiFallback: true,
+        client:             {
+          logging: 'error',
+          overlay: {
+            errors:   true,
+            warnings: false,
+          },
+          progress:  true,
+          reconnect: 3,
         },
-        before: stackr23Middlewares,
+        // before: stackr23Middlewares,
+        setupExitSignals: true,
       },
-      devtool: 'eval-source-map',
-      output:  {
+      devtool:       'eval-source-map',
+      output:        {
         devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]',
       },
       plugins: [ new webpack.HotModuleReplacementPlugin() ],

diff --git a/src/types/react/index.js b/src/types/react/index.js
@@ -1,4 +1,4 @@
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
 
 const getCommonConfig = require('./common.config')
 const getDevelopConfig = require('./develop.config')
@@ -7,7 +7,7 @@ const mock = require('./mock.config')
 const { addEnvVariables } = require('../../utils')
 
 module.exports = (env) => {
-  addEnvVariables()
+  // TODO: refactor env/mode usage and config merging
   const configCommon = getCommonConfig(env)
 
   if (env === 'production') {
@@ -17,7 +17,5 @@ module.exports = (env) => {
   const developConfig = getDevelopConfig(env)
   const configDev = merge(configCommon, developConfig)
 
-  return env === 'development_mock'
-    ? merge(configDev, mock.config, addEnvVariables())
-    : merge(configDev, addEnvVariables())
+  return merge(configDev, (env === 'development_mock' && mock.config))
 }
diff --git a/src/types/react/mock.config.js b/src/types/react/mock.config.js
@@ -1,5 +1,8 @@
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
 
-const utils = require('../../utils')
+const getDevelopConfig = require('./develop.config')
+const { setEnvVariable } = require('../../utils')
 
-exports.config = merge([ utils.setEnvVariable('process.env.NODE_ENV', 'mock') ])
+setEnvVariable('process.env.NODE_ENV', 'mock')
+
+exports.config =  merge(getDevelopConfig('development_mock'))
diff --git a/src/types/react/production.config.js b/src/types/react/production.config.js
@@ -1,8 +1,11 @@
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
 
 const { setEnvVariable } = require('../../utils')
 const { PATHS } = require('../../constants')
 
+
+setEnvVariable('process.env.NODE_ENV', 'production')
+
 exports.config = merge([
   {
     output: {
@@ -14,13 +17,12 @@ exports.config = merge([
       splitChunks: {
         chunks:      'all',
         cacheGroups: {
-          vendor: {
+          defaultVendors: {
             test:     /[\\/]node_modules[\\/]/,
             priority: 1,
           },
         },
       },
     },
   },
-  setEnvVariable('process.env.NODE_ENV', 'production'),
 ])
diff --git a/test/assets/assets.spec.js b/test/assets/assets.spec.js
@@ -1,20 +1,14 @@
 import * as assets from './index'
 
-console.log('ASSETS:\n')
-console.log(assets)
-
 const { chai: { expect }} = global
 
-describe('[Assets] - file-loader', function() {
-  it('export-default-from as namespace', () => {
-    // check export-default-from
-    expect(assets.__esModule).to.be.equal(true) // eslint-disable-line import/namespace
+describe('[Assets] - file-loader combined with export-default-from', function() {
+  it('imported namespace contains asset keys', () => {
     // check import - import-namespace combined with export-default-from
     expect(assets).to.contain.keys('stackr23_logo')
   })
 
-  it('output contains \'[path][name]\'', () => {
-    // check path prefix
+  it('asset key contains \'/[path]/[name].[ext]\'', () => { // check path prefix
     expect(assets.stackr23_logo).to.contain('/assets/stackr23_logo.jpg')
   })
 })
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,4 +1,4 @@
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
 
 const configStackR23 = require('./index.js')