FIX webpack prefixes switch config

hepsiburada · Aug 11, 2022 · 43b4a2e · 43b4a2e
1 parent 245b7b0
commit 43b4a2e
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 113 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "voltranjs",
-  "version": "1.1.3",
+  "version": "1.2.0-beta.0",
   "main": "src/index.js",
   "author": "Hepsiburada Technology Team",
   "bin": {

diff --git a/webpack.client.config.js b/webpack.client.config.js
@@ -1,52 +1,61 @@
-const path = require("path");
-const fs = require("fs");
+const path = require('path');
+const fs = require('fs');
 
-const webpack = require("webpack");
-const { merge } = require("webpack-merge");
-const AssetsPlugin = require("assets-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const CopyWebpackPlugin = require("copy-webpack-plugin");
-const TerserWebpackPlugin = require("terser-webpack-plugin");
-const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
-const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
-const { ESBuildMinifyPlugin } = require("esbuild-loader");
+const webpack = require('webpack');
+const { merge } = require('webpack-merge');
+const AssetsPlugin = require('assets-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const TerserWebpackPlugin = require('terser-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const { ESBuildMinifyPlugin } = require('esbuild-loader');
 
-require("intersection-observer");
+require('intersection-observer');
 
-const { createComponentName } = require("./src/universal/utils/helper.js");
-const packageJson = require(path.resolve(process.cwd(), "package.json"));
+const { createComponentName } = require('./src/universal/utils/helper.js');
+const packageJson = require(path.resolve(process.cwd(), 'package.json'));
 
-const isBuildingForCDN = process.argv.includes("--for-cdn");
-const env = process.env.VOLTRAN_ENV || "local";
+const isBuildingForCDN = process.argv.includes('--for-cdn');
+const env = process.env.VOLTRAN_ENV || 'local';
 
-const voltranConfig = require("./voltran.config");
+const voltranConfig = require('./voltran.config');
 const appConfigFilePath = `${voltranConfig.appConfigFile.entry}/${env}.conf.js`;
 const appConfig = require(appConfigFilePath);
-const commonConfig = require("./webpack.common.config");
-const postCssConfig = require("./postcss.config");
-const babelConfig = require("./babel.server.config");
+const commonConfig = require('./webpack.common.config');
+const postCssConfig = require('./postcss.config');
+const babelConfig = require('./babel.server.config');
 
 const voltranClientConfigPath = voltranConfig.webpackConfiguration.client;
 const voltranClientConfig = voltranClientConfigPath
   ? require(voltranConfig.webpackConfiguration.client)
-  : "";
+  : '';
 
-const normalizeUrl = require("./lib/os.js");
-const replaceString = require("./config/string.js");
+const normalizeUrl = require('./lib/os.js');
+const replaceString = require('./config/string.js');
 
 const fragmentManifest = require(voltranConfig.routing.dictionary);
 const fixFragmentManifest = require('./src/universal/core/route/dictionary');
 
 const isDebug = voltranConfig.dev;
 const reScript = /\.(js|jsx|mjs)$/;
 const distFolderPath = voltranConfig.distFolder;
+const isProd = process.env.BROWSER && process.env.VOLTRAN_ENV === 'prod';
+const hideCssPrefixOnTest = voltranConfig.hideCssPrefixOnTest;
+
+const suffix = appConfig.isCssClassNameObfuscationEnabled
+  ? '[name]-[hash:base64]'
+  : hideCssPrefixOnTest
+  ? '[name]-[local]'
+  : '[path][name]__[local]';
+
+const localIndentDefault = `${voltranConfig.prefix}-${suffix}`;
+const localIndentName = isProd || !hideCssPrefixOnTest ? localIndentDefault : suffix;
 
 const chunks = {};
 
-chunks.client = [
-  path.resolve(__dirname, "src/client/client.js")
-];
+chunks.client = [path.resolve(__dirname, 'src/client/client.js')];
 
 function generateChunk(fragments) {
   fragments.forEach(fragment => {
@@ -64,11 +73,7 @@ const appConfigFileTarget = `${voltranConfig.appConfigFile.output.path}/${voltra
 
 fs.copyFileSync(appConfigFilePath, appConfigFileTarget);
 
-chunks.client.unshift(
-  "regenerator-runtime/runtime.js",
-  "core-js/stable",
-  "intersection-observer"
-);
+chunks.client.unshift('regenerator-runtime/runtime.js', 'core-js/stable', 'intersection-observer');
 
 if (isDebug) {
   const appConfigJSONContent = require(appConfigFileTarget);
@@ -78,28 +83,28 @@ if (isDebug) {
       appConfigJSONContent.services[service].serverUrl;
   }
 
-  const moduleExportsText = "module.exports";
+  const moduleExportsText = 'module.exports';
   const appConfigFileContent = fs.readFileSync(appConfigFileTarget).toString();
   const moduleExportsIndex = appConfigFileContent.indexOf(moduleExportsText);
 
   let context = appConfigFileContent.substr(0, moduleExportsIndex + moduleExportsText.length);
-  context += "=";
+  context += '=';
   context += JSON.stringify(appConfigJSONContent);
-  context += ";";
+  context += ';';
 
   fs.writeFileSync(appConfigFileTarget, context);
 
-  chunks.client.push("webpack-hot-middleware/client");
+  chunks.client.push('webpack-hot-middleware/client');
 }
 
 const outputPath = voltranConfig.output.client.path;
 
 const clientConfig = merge(commonConfig, voltranClientConfig, {
-  name: "client",
+  name: 'client',
 
-  target: "web",
+  target: 'web',
 
-  mode: isDebug ? "development" : "production",
+  mode: isDebug ? 'development' : 'production',
 
   entry: chunks,
 
@@ -115,16 +120,16 @@ const clientConfig = merge(commonConfig, voltranClientConfig, {
     rules: [
       {
         test: reScript,
-        loader: "esbuild-loader",
-        include: [path.resolve(__dirname, "src"), voltranConfig.inputFolder],
+        loader: 'esbuild-loader',
+        include: [path.resolve(__dirname, 'src'), voltranConfig.inputFolder],
         options: {
-          loader: "jsx",
-          target: "es2015"
+          loader: 'jsx',
+          target: 'es2015'
         }
       },
       {
         test: /\.js$/,
-        loader: "string-replace-loader",
+        loader: 'string-replace-loader',
         options: {
           multiple: [...replaceString()]
         }
@@ -134,22 +139,22 @@ const clientConfig = merge(commonConfig, voltranClientConfig, {
         use: [
           isDebug
             ? {
-              loader: "style-loader",
-              options: {
-                injectType: "singletonStyleTag"
+                loader: 'style-loader',
+                options: {
+                  injectType: 'singletonStyleTag'
+                }
               }
-            }
             : MiniCssExtractPlugin.loader,
           {
-            loader: "css-loader",
+            loader: 'css-loader',
             options: {
               modules: false,
               importLoaders: 1,
               sourceMap: isDebug
             }
           },
           {
-            loader: "postcss-loader",
+            loader: 'postcss-loader',
             options: postCssConfig
           }
         ]
@@ -159,42 +164,40 @@ const clientConfig = merge(commonConfig, voltranClientConfig, {
         use: [
           isDebug
             ? {
-              loader: "style-loader",
-              options: {
-                injectType: "singletonStyleTag"
+                loader: 'style-loader',
+                options: {
+                  injectType: 'singletonStyleTag'
+                }
               }
-            }
             : MiniCssExtractPlugin.loader,
           {
-            loader: "css-loader",
+            loader: 'css-loader',
             options: {
               modules: {
-                localIdentName: appConfig.isCssClassNameObfuscationEnabled
-                  ? `${voltranConfig.prefix}-[name]-[hash:base64]`
-                  : `${voltranConfig.prefix}-[path][name]__[local]`,
+                localIdentName: localIndentName,
                 localIdentHashSalt: packageJson.name
               },
               importLoaders: 1,
               sourceMap: isDebug
             }
           },
           {
-            loader: "postcss-loader",
+            loader: 'postcss-loader',
             options: postCssConfig
           },
           {
-            loader: "sass-loader"
+            loader: 'sass-loader'
           },
           ...(voltranConfig.sassResources
             ? [
-              {
-                loader: "sass-resources-loader",
-                options: {
-                  sourceMap: false,
-                  resources: voltranConfig.sassResources
+                {
+                  loader: 'sass-resources-loader',
+                  options: {
+                    sourceMap: false,
+                    resources: voltranConfig.sassResources
+                  }
                 }
-              }
-            ]
+              ]
             : [])
         ]
       }
@@ -205,7 +208,7 @@ const clientConfig = merge(commonConfig, voltranClientConfig, {
     // emitOnErrors: false,
     minimizer: [
       new ESBuildMinifyPlugin({
-        target: "es2015",
+        target: 'es2015',
         css: true
       }),
       new TerserWebpackPlugin({
@@ -221,24 +224,24 @@ const clientConfig = merge(commonConfig, voltranClientConfig, {
 
   resolve: {
     alias: {
-      "react": path.resolve(process.cwd(), "node_modules/react"),
-      "react-dom": path.resolve(process.cwd(), "node_modules/react-dom")
+      react: path.resolve(process.cwd(), 'node_modules/react'),
+      'react-dom': path.resolve(process.cwd(), 'node_modules/react-dom')
     }
   },
 
   plugins: [
     ...(isBuildingForCDN
       ? []
       : [
-        new CleanWebpackPlugin({
-          verbose: false,
-          dangerouslyAllowCleanPatternsOutsideProject: true
-        })
-      ]),
+          new CleanWebpackPlugin({
+            verbose: false,
+            dangerouslyAllowCleanPatternsOutsideProject: true
+          })
+        ]),
 
     new webpack.DefinePlugin({
-      "process.env": {},
-      "process.env.BROWSER": true,
+      'process.env': {},
+      'process.env.BROWSER': true,
       __DEV__: isDebug,
       GO_PIPELINE_LABEL: JSON.stringify(GO_PIPELINE_LABEL)
     }),
@@ -253,19 +256,21 @@ const clientConfig = merge(commonConfig, voltranClientConfig, {
     ...(isDebug
       ? [new webpack.HotModuleReplacementPlugin()]
       : [
-        new MiniCssExtractPlugin({
-          filename: "[name].css",
-          chunkFilename: "[id]-[contenthash].css"
-        })
-      ]),
+          new MiniCssExtractPlugin({
+            filename: '[name].css',
+            chunkFilename: '[id]-[contenthash].css'
+          })
+        ]),
 
     new AssetsPlugin({
       path: voltranConfig.inputFolder,
-      filename: "assets.json",
+      filename: 'assets.json',
       prettyPrint: true
     }),
 
-    ...(appConfig?.bundleAnalyzerStaticEnabled ? [new BundleAnalyzerPlugin({analyzerMode: 'static', openAnalyzer: false})] : [])
+    ...(appConfig?.bundleAnalyzerStaticEnabled
+      ? [new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false })]
+      : [])
   ]
 });