@shopgate/webpack 7.30.0-alpha.3 → 7.30.0-alpha.5

package/locales/en.json

@@ -11,7 +11,7 @@
     "STRINGS_COULD_NOT_BE_CREATED": "Strings could not be created",
     "INDEXING_TYPE": "Indexing {type}...",
     "INDEXED_TYPE": "... {type} indexed.",
-    "NO_EXTENSIONS_FOUND_FOR_TYPE": "No extensions found for ''{type}''",
+    "NO_EXTENSIONS_FOUND_FOR_TYPE": "No extensions found for \"{type}\"",
     "TYPE_PORTALS": "portals",
     "TYPE_REDUCERS": "reducers",
     "TYPE_SUBSCRIBERS": "subscribers",

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@shopgate/webpack",
-  "version": "7.30.0-alpha.3",
+  "version": "7.30.0-alpha.5",
   "description": "The webpack configuration for Shopgate's Engage.",
   "main": "webpack.config.js",
   "license": "Apache-2.0",
   "dependencies": {
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.17",
     "ajv": "^6.10.2",
     "babel-loader": "8.4.1",
     "chalk": "^4.1.2",
@@ -18,6 +19,7 @@
     "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^2.9.4",
     "progress-bar-webpack-plugin": "^2.1.0",
+    "react-refresh": "^0.18.0",
     "style-loader": "3.3.4",
     "terser-webpack-plugin": "^5.3.14",
     "webpack": "^5.102.1",

package/plugins/ShopgateIndexerPlugin.js

@@ -76,7 +76,6 @@ function readConfig(options) {
   const exports = [exportsStart]; // Holds the export strings.
 
   if (type === TYPE_PORTALS || type === TYPE_WIDGETS || type === TYPE_WIDGETS_V2) {
-    imports.push('import { hot } from \'react-hot-loader/root\';');
     imports.push('import { lazy } from \'react\';');
     imports.push('');
   }
@@ -107,11 +106,7 @@ function readConfig(options) {
       return;
     }
 
-    if (isPortalsOrWidgets) {
-      exports.push(`  '${id}': hot(${variableName}),`);
-    } else {
-      exports.push(`  '${id}': ${variableName},`);
-    }
+    exports.push(`  '${id}': ${variableName},`);
   });
 
   if (importsEnd) {

package/templates/default.ejs

@@ -10,6 +10,11 @@
   <title>
     <%= htmlWebpackPlugin.options.title %>
   </title>
+  <% if (htmlWebpackPlugin.files && htmlWebpackPlugin.files.css) { %>
+    <% htmlWebpackPlugin.files.css.forEach(function(css) { %>
+      <link rel="stylesheet" href="<%= css %>">
+    <% }) %>
+  <% } %>
   <% const scripts = htmlWebpackPlugin.files.js; %>
   <% const vendor = scripts.find(s => s.includes('vendor')); %>
   <% if (vendor) { %><script src="<%= vendor %>"></script><% } %>

package/webpack.config.js

@@ -10,6 +10,7 @@ const { GenerateSW } = require('workbox-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const rxPaths = require('rxjs/_esm5/path-mapping');
 const ShopgateIndexerPlugin = require('./plugins/ShopgateIndexerPlugin');
 const ShopgateThemeConfigValidatorPlugin = require('./plugins/ShopgateThemeConfigValidatorPlugin');
@@ -79,7 +80,7 @@ const config = {
 
       // Packages from common module
       react: resolveForAliasPackage('react'),
-      'react-dom': resolveForAliasPackage('@hot-loader', '/react-dom'),
+      'react-dom': resolveForAliasPackage('react-dom'),
       'react-redux': resolveForAliasPackage('react-redux'),
       reselect: resolveForAliasPackage('reselect'),
       glamor: resolveForAliasPackage('glamor'),
@@ -90,7 +91,6 @@ const config = {
       'react-helmet': resolveForAliasPackage('react-helmet'),
       'css-spring': resolveForAliasPackage('css-spring'),
       'react-transition-group': resolveForAliasPackage('react-transition-group'),
-      'react-hot-loader': resolveForAliasPackage('react-hot-loader'),
       '@virtuous': resolveForAliasPackage('@virtuous'),
       lodash: resolveForAliasPackage('lodash'),
       'prop-types': resolveForAliasPackage('prop-types'),
@@ -184,6 +184,7 @@ const config = {
     ...(isDev && addBundleAnalyzer ? [
       new BundleAnalyzerPlugin(),
     ] : []),
+    ...(isDev ? [new ReactRefreshWebpackPlugin()] : []),
     ...(!isDev ? [
       new CompressionWebpackPlugin({
         filename: '[path][base].gz[query]',
@@ -199,7 +200,7 @@ const config = {
       // Extract CSS into separate minified files on production builds
       new MiniCssExtractPlugin({
         filename: '[name].[contenthash].css',
-        chunkFilename: '[id].[contenthash].css',
+        chunkFilename: '[name].[contenthash].css',
       }),
       new CssMinimizerPlugin(),
     ] : []),
@@ -237,6 +238,7 @@ const config = {
             options: {
               configFile: path.resolve(themePath, 'babel.config.js'),
               cacheDirectory: path.resolve(themePath, '..', '..', '.cache-loader'),
+              plugins: [isDev && require.resolve('react-refresh/babel')].filter(Boolean),
             },
           },
         ],
@@ -252,6 +254,10 @@ const config = {
   },
   devtool,
   stats: isDev ? 'normal' : 'errors-only',
+  ignoreWarnings: [
+    // Disable warning about named imports from JSON files. It's covered by our linter rules.
+    /from default-exporting module \(only default export is available soon\)/,
+  ],
   performance: {
     hints: isDev ? false : 'warning',
   },