@ovh-ux/manager-webpack-config 6.1.2 → 7.0.1

package/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.0.1](https://github.com/ovh/manager/compare/@ovh-ux/manager-webpack-config@7.0.0...@ovh-ux/manager-webpack-config@7.0.1) (2023-12-05)
+
+**Note:** Version bump only for package @ovh-ux/manager-webpack-config
+
+
+
+
+
+# [7.0.0](https://github.com/ovh/manager/compare/@ovh-ux/manager-webpack-config@6.1.2...@ovh-ux/manager-webpack-config@7.0.0) (2023-09-07)
+
+
+### Build System
+
+* bump nodejs to v18 and webpack to v5 ([6270204](https://github.com/ovh/manager/commit/6270204e59bbfb87ec000c5853be08027affbb69))
+
+
+### BREAKING CHANGES
+
+* bump webpack from v4 to v5
+
+Signed-off-by: Florian Renaut <florian.renaut@corp.ovh.com>
+Co-authored-by: Jisay <jean-christophe.alleman@corp.ovh.com>
+Co-authored-by: Anoop N <anoop.n@ovhcloud.com>
+
+
+
+
+
 ## [6.1.2](https://github.com/ovh/manager/compare/@ovh-ux/manager-webpack-config@6.1.1...@ovh-ux/manager-webpack-config@6.1.2) (2023-01-19)
 
 **Note:** Version bump only for package @ovh-ux/manager-webpack-config

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovh-ux/manager-webpack-config",
-  "version": "6.1.2",
+  "version": "7.0.1",
   "description": "OVHcloud manager shared webpack configuration.",
   "keywords": [
     "configuration",
@@ -19,52 +19,46 @@
   "author": "OVH SAS",
   "main": "./src/index.js",
   "dependencies": {
-    "@babel/generator": "^7.10.3",
-    "@babel/parser": "^7.10.3",
-    "@babel/plugin-proposal-class-properties": "^7.10.1",
-    "@babel/plugin-proposal-optional-chaining": "^7.10.1",
-    "@babel/plugin-proposal-private-methods": "^7.10.1",
+    "@babel/core": "^7.20.2",
+    "@babel/generator": "^7.20.3",
+    "@babel/parser": "^7.20.3",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.10.3",
-    "@ovh-ux/component-rollup-config": "^12.0.2",
-    "@ovh-ux/manager-webpack-dev-server": "^3.0.0",
-    "acorn": "^6.0.5",
-    "acorn-class-fields": "^0.3.7",
+    "@babel/preset-env": "^7.20.2",
+    "@ovh-ux/component-rollup-config": "^13.0.1",
+    "@ovh-ux/manager-webpack-dev-server": "^4.0.0",
+    "acorn": "^8.8.1",
+    "acorn-class-fields": "^1.0.0",
     "acorn-dynamic-import": "^4.0.0",
     "acorn-optional-chaining": "^0.0.3",
-    "acorn-private-methods": "^0.3.3",
+    "acorn-private-methods": "^1.0.0",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^9.1.0",
     "babel-plugin-angularjs-annotate": "^0.10.0",
-    "cache-loader": "^4.1.0",
-    "copy-webpack-plugin": "^4.6.0",
-    "core-js": "^3.6.5",
-    "css-loader": "^4.3.0",
-    "file-loader": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "core-js": "^3.26.0",
+    "css-loader": "^6.7.1",
+    "file-loader": "^6.2.0",
     "html-minifier": "^4.0.0",
-    "html-webpack-plugin": "^4.5.0",
-    "http-proxy-middleware": "^0.19.1",
+    "html-webpack-plugin": "^5.5.0",
     "less": "~3.9.0",
-    "less-loader": "^7.0.2",
+    "less-loader": "^11.1.0",
     "less-plugin-remcalc": "^0.1.0",
-    "loader-utils": "^2.0.0",
-    "lodash": "^4.17.15",
-    "mini-css-extract-plugin": "~1.2.1",
-    "node-sass": "^7.0.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "lodash": "^4.17.21",
+    "mini-css-extract-plugin": "^2.6.1",
     "raw-loader": "^4.0.2",
-    "regenerator-runtime": "^0.13.7",
+    "regenerator-runtime": "^0.13.10",
     "resolve-url-loader": "^3.0.0",
-    "sass-loader": "^10.2.0",
+    "sass": "^1.56.0",
+    "sass-loader": "^13.1.0",
     "script-loader": "^0.7.2",
-    "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^4.2.2",
-    "url-loader": "^4.1.1",
-    "webpack": "^4.44.2",
-    "webpack-bundle-analyzer": "^3.9.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-merge": "^4.2.2",
-    "webpack-retry-chunk-load-plugin": "^1.4.0",
-    "webpackbar": "^4.0.0"
+    "terser-webpack-plugin": "^5.3.6",
+    "webpack": "^5.76.2",
+    "webpack-cli": "^4.10.0",
+    "webpack-merge": "^5.8.0",
+    "webpack-retry-chunk-load-plugin": "^3.1.1",
+    "webpackbar": "^5.0.2"
   }
 }

package/src/index.js

@@ -1,4 +1,4 @@
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const devServer = require('@ovh-ux/manager-webpack-dev-server');
 const common = require('./webpack.common');
 const prodConfig = require('./webpack.prod');

package/src/loaders/translation-inject.js

@@ -1,4 +1,3 @@
-const loaderUtils = require('loader-utils');
 const get = require('lodash/get');
 const merge = require('lodash/merge');
 const pick = require('lodash/pick');
@@ -9,11 +8,10 @@ const privateMethods = require('acorn-private-methods');
 const componentConfig = require('@ovh-ux/component-rollup-config');
 const acornDynamicImport = require('acorn-dynamic-import');
 
-const getOptions = Object.assign(loaderUtils.getOptions);
 const dynamicImport = acornDynamicImport.default;
 
 module.exports = function injectTranslationsLoader(source) {
-  const options = merge({ filtering: false }, getOptions(this));
+  const options = merge({ filtering: false }, this.getOptions());
   const translationInject = get(componentConfig, 'plugins.translationInject');
 
   const parser = acorn.Parser.extend(dynamicImport)

package/src/loaders/translation-ui-router.js

@@ -1,4 +1,3 @@
-const loaderUtils = require('loader-utils');
 const get = require('lodash/get');
 const merge = require('lodash/merge');
 const pick = require('lodash/pick');
@@ -9,11 +8,10 @@ const privateMethods = require('acorn-private-methods');
 const componentConfig = require('@ovh-ux/component-rollup-config');
 const acornDynamicImport = require('acorn-dynamic-import');
 
-const getOptions = Object.assign(loaderUtils.getOptions);
 const dynamicImport = acornDynamicImport.default;
 
 module.exports = function translationUiRouterLoader(source) {
-  const options = merge({ filtering: false }, getOptions(this));
+  const options = merge({ filtering: false }, this.getOptions());
   const translationUiRouter = get(
     componentConfig,
     'plugins.translationUiRouter',

package/src/webpack.common.js

@@ -7,7 +7,6 @@ const get = require('lodash/get');
 const set = require('lodash/set');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserJSPlugin = require('terser-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const webpackRetryChunckLoadPlugin = require('webpack-retry-chunk-load-plugin');
 
 const RetryChunkLoadPlugin = Object.assign(
@@ -16,13 +15,6 @@ const RetryChunkLoadPlugin = Object.assign(
 
 const webpack = require('webpack');
 
-const cacheLoader = {
-  loader: 'cache-loader',
-  options: {
-    cacheDirectory: path.resolve(process.cwd(), 'node_modules/.cache-loader'),
-  },
-};
-
 // The common webpack configuration
 
 module.exports = (opts) => {
@@ -47,14 +39,28 @@ module.exports = (opts) => {
     /\/dist/, // bundled files
   ];
 
-  return {
-    plugins: [
+  const plugins = [];
+  const toCopy = [
+    ...get(opts, 'assets.files', []),
+    ...get(opts, 'assets.options', []),
+  ];
+
+  if (toCopy.length) {
+    plugins.push(
       // copy application assets
       // note: we could use the html-loader plugin but it wouldn't work for dynamic src attributes!
-      new CopyWebpackPlugin(
-        get(opts, 'assets.files', []),
-        get(opts, 'assets.options', {}),
-      ),
+      new CopyWebpackPlugin({
+        patterns: toCopy,
+      }),
+    );
+  }
+
+  return {
+    output: {
+      publicPath: '',
+    },
+    plugins: [
+      ...plugins,
 
       // see : https://github.com/jantimon/html-webpack-plugin
       new HtmlWebpackPlugin({
@@ -70,6 +76,7 @@ module.exports = (opts) => {
       new MiniCssExtractPlugin({
         filename: '[name].[contenthash].css',
         chunkFilename: '[id].css',
+        ignoreOrder: true,
       }),
 
       new webpack.DefinePlugin({
@@ -96,6 +103,7 @@ module.exports = (opts) => {
       modules: [
         './node_modules', // #1 check in module's relative node_module directory
         path.resolve('./node_modules'), // #2 check in application's node_module directory
+        path.resolve(__dirname, '../node_modules'), // #3 check in webpack config directory
       ],
     },
 
@@ -110,11 +118,7 @@ module.exports = (opts) => {
         // load images & fonts into file or convert to base64 if size < 10Kib
         {
           test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            esModule: false,
-          },
+          type: 'asset',
         },
 
         // load css files
@@ -122,7 +126,6 @@ module.exports = (opts) => {
           test: /\.css$/,
           use: [
             MiniCssExtractPlugin.loader,
-            cacheLoader,
             {
               loader: 'css-loader', // translates CSS into CommonJS
             },
@@ -140,7 +143,6 @@ module.exports = (opts) => {
           test: /\.less$/,
           use: [
             MiniCssExtractPlugin.loader,
-            cacheLoader,
             {
               loader: 'css-loader', // translates CSS into CommonJS
             },
@@ -162,9 +164,15 @@ module.exports = (opts) => {
           test: /\.scss$/,
           use: [
             MiniCssExtractPlugin.loader,
-            cacheLoader,
             'css-loader', // translates CSS into CommonJS
-            'sass-loader', // compiles Sass to CSS
+            {
+              loader: 'sass-loader',
+              options: {
+                sassOptions: {
+                  quietDeps: true,
+                },
+              },
+            },
           ],
         },
 
@@ -172,9 +180,12 @@ module.exports = (opts) => {
         {
           test: /Messages_\w+_\w+\.json$/,
           use: [
-            cacheLoader,
             {
               loader: path.resolve(__dirname, './loaders/translation-json.js'),
+              options: {
+                cacheCompression: false,
+                cacheDirectory: true,
+              },
             },
           ],
         },
@@ -184,10 +195,11 @@ module.exports = (opts) => {
           test: /\.js$/,
           exclude: jsExclude,
           use: [
-            cacheLoader,
             {
               loader: 'babel-loader', // babelify JS sources
               options: {
+                cacheCompression: false,
+                cacheDirectory: true,
                 presets: [
                   require.resolve('@babel/preset-env'), // babel preset configuration
                 ],
@@ -211,7 +223,6 @@ module.exports = (opts) => {
           exclude: jsExclude,
           enforce: 'pre',
           use: [
-            cacheLoader,
             {
               loader: path.resolve(
                 __dirname,
@@ -231,7 +242,6 @@ module.exports = (opts) => {
           exclude: jsExclude,
           enforce: 'pre',
           use: [
-            cacheLoader,
             {
               loader: path.resolve(
                 __dirname,
@@ -247,7 +257,7 @@ module.exports = (opts) => {
     }, // \module
 
     optimization: {
-      minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
+      minimizer: [new TerserJSPlugin({})],
       runtimeChunk: 'single',
       // bundle spliting configuration
       splitChunks: {