Skip to content

Commit 43b4a2e

Browse files
Cihan SELİMahmetkuslular
Cihan SELİM
authored and
ahmetkuslular
committed
FIX webpack prefixes switch config
1 parent 245b7b0 commit 43b4a2e

File tree

3 files changed

+125
-113
lines changed

3 files changed

+125
-113
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "voltranjs",
3-
"version": "1.1.3",
3+
"version": "1.2.0-beta.0",
44
"main": "src/index.js",
55
"author": "Hepsiburada Technology Team",
66
"bin": {

‎webpack.client.config.js‎

Lines changed: 89 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,61 @@
1-
const path = require("path");
2-
const fs = require("fs");
1+
const path = require('path');
2+
const fs = require('fs');
33

4-
const webpack = require("webpack");
5-
const { merge } = require("webpack-merge");
6-
const AssetsPlugin = require("assets-webpack-plugin");
7-
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
8-
const CopyWebpackPlugin = require("copy-webpack-plugin");
9-
const TerserWebpackPlugin = require("terser-webpack-plugin");
10-
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
11-
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
12-
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
13-
const { ESBuildMinifyPlugin } = require("esbuild-loader");
4+
const webpack = require('webpack');
5+
const { merge } = require('webpack-merge');
6+
const AssetsPlugin = require('assets-webpack-plugin');
7+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
8+
const CopyWebpackPlugin = require('copy-webpack-plugin');
9+
const TerserWebpackPlugin = require('terser-webpack-plugin');
10+
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
11+
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
12+
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
13+
const { ESBuildMinifyPlugin } = require('esbuild-loader');
1414

15-
require("intersection-observer");
15+
require('intersection-observer');
1616

17-
const { createComponentName } = require("./src/universal/utils/helper.js");
18-
const packageJson = require(path.resolve(process.cwd(), "package.json"));
17+
const { createComponentName } = require('./src/universal/utils/helper.js');
18+
const packageJson = require(path.resolve(process.cwd(), 'package.json'));
1919

20-
const isBuildingForCDN = process.argv.includes("--for-cdn");
21-
const env = process.env.VOLTRAN_ENV || "local";
20+
const isBuildingForCDN = process.argv.includes('--for-cdn');
21+
const env = process.env.VOLTRAN_ENV || 'local';
2222

23-
const voltranConfig = require("./voltran.config");
23+
const voltranConfig = require('./voltran.config');
2424
const appConfigFilePath = `${voltranConfig.appConfigFile.entry}/${env}.conf.js`;
2525
const appConfig = require(appConfigFilePath);
26-
const commonConfig = require("./webpack.common.config");
27-
const postCssConfig = require("./postcss.config");
28-
const babelConfig = require("./babel.server.config");
26+
const commonConfig = require('./webpack.common.config');
27+
const postCssConfig = require('./postcss.config');
28+
const babelConfig = require('./babel.server.config');
2929

3030
const voltranClientConfigPath = voltranConfig.webpackConfiguration.client;
3131
const voltranClientConfig = voltranClientConfigPath
3232
? require(voltranConfig.webpackConfiguration.client)
33-
: "";
33+
: '';
3434

35-
const normalizeUrl = require("./lib/os.js");
36-
const replaceString = require("./config/string.js");
35+
const normalizeUrl = require('./lib/os.js');
36+
const replaceString = require('./config/string.js');
3737

3838
const fragmentManifest = require(voltranConfig.routing.dictionary);
3939
const fixFragmentManifest = require('./src/universal/core/route/dictionary');
4040

4141
const isDebug = voltranConfig.dev;
4242
const reScript = /\.(js|jsx|mjs)$/;
4343
const distFolderPath = voltranConfig.distFolder;
44+
const isProd = process.env.BROWSER && process.env.VOLTRAN_ENV === 'prod';
45+
const hideCssPrefixOnTest = voltranConfig.hideCssPrefixOnTest;
46+
47+
const suffix = appConfig.isCssClassNameObfuscationEnabled
48+
? '[name]-[hash:base64]'
49+
: hideCssPrefixOnTest
50+
? '[name]-[local]'
51+
: '[path][name]__[local]';
52+
53+
const localIndentDefault = `${voltranConfig.prefix}-${suffix}`;
54+
const localIndentName = isProd || !hideCssPrefixOnTest ? localIndentDefault : suffix;
4455

4556
const chunks = {};
4657

47-
chunks.client = [
48-
path.resolve(__dirname, "src/client/client.js")
49-
];
58+
chunks.client = [path.resolve(__dirname, 'src/client/client.js')];
5059

5160
function generateChunk(fragments) {
5261
fragments.forEach(fragment => {
@@ -64,11 +73,7 @@ const appConfigFileTarget = `${voltranConfig.appConfigFile.output.path}/${voltra
6473

6574
fs.copyFileSync(appConfigFilePath, appConfigFileTarget);
6675

67-
chunks.client.unshift(
68-
"regenerator-runtime/runtime.js",
69-
"core-js/stable",
70-
"intersection-observer"
71-
);
76+
chunks.client.unshift('regenerator-runtime/runtime.js', 'core-js/stable', 'intersection-observer');
7277

7378
if (isDebug) {
7479
const appConfigJSONContent = require(appConfigFileTarget);
@@ -78,28 +83,28 @@ if (isDebug) {
7883
appConfigJSONContent.services[service].serverUrl;
7984
}
8085

81-
const moduleExportsText = "module.exports";
86+
const moduleExportsText = 'module.exports';
8287
const appConfigFileContent = fs.readFileSync(appConfigFileTarget).toString();
8388
const moduleExportsIndex = appConfigFileContent.indexOf(moduleExportsText);
8489

8590
let context = appConfigFileContent.substr(0, moduleExportsIndex + moduleExportsText.length);
86-
context += "=";
91+
context += '=';
8792
context += JSON.stringify(appConfigJSONContent);
88-
context += ";";
93+
context += ';';
8994

9095
fs.writeFileSync(appConfigFileTarget, context);
9196

92-
chunks.client.push("webpack-hot-middleware/client");
97+
chunks.client.push('webpack-hot-middleware/client');
9398
}
9499

95100
const outputPath = voltranConfig.output.client.path;
96101

97102
const clientConfig = merge(commonConfig, voltranClientConfig, {
98-
name: "client",
103+
name: 'client',
99104

100-
target: "web",
105+
target: 'web',
101106

102-
mode: isDebug ? "development" : "production",
107+
mode: isDebug ? 'development' : 'production',
103108

104109
entry: chunks,
105110

@@ -115,16 +120,16 @@ const clientConfig = merge(commonConfig, voltranClientConfig, {
115120
rules: [
116121
{
117122
test: reScript,
118-
loader: "esbuild-loader",
119-
include: [path.resolve(__dirname, "src"), voltranConfig.inputFolder],
123+
loader: 'esbuild-loader',
124+
include: [path.resolve(__dirname, 'src'), voltranConfig.inputFolder],
120125
options: {
121-
loader: "jsx",
122-
target: "es2015"
126+
loader: 'jsx',
127+
target: 'es2015'
123128
}
124129
},
125130
{
126131
test: /\.js$/,
127-
loader: "string-replace-loader",
132+
loader: 'string-replace-loader',
128133
options: {
129134
multiple: [...replaceString()]
130135
}
@@ -134,22 +139,22 @@ const clientConfig = merge(commonConfig, voltranClientConfig, {
134139
use: [
135140
isDebug
136141
? {
137-
loader: "style-loader",
138-
options: {
139-
injectType: "singletonStyleTag"
142+
loader: 'style-loader',
143+
options: {
144+
injectType: 'singletonStyleTag'
145+
}
140146
}
141-
}
142147
: MiniCssExtractPlugin.loader,
143148
{
144-
loader: "css-loader",
149+
loader: 'css-loader',
145150
options: {
146151
modules: false,
147152
importLoaders: 1,
148153
sourceMap: isDebug
149154
}
150155
},
151156
{
152-
loader: "postcss-loader",
157+
loader: 'postcss-loader',
153158
options: postCssConfig
154159
}
155160
]
@@ -159,42 +164,40 @@ const clientConfig = merge(commonConfig, voltranClientConfig, {
159164
use: [
160165
isDebug
161166
? {
162-
loader: "style-loader",
163-
options: {
164-
injectType: "singletonStyleTag"
167+
loader: 'style-loader',
168+
options: {
169+
injectType: 'singletonStyleTag'
170+
}
165171
}
166-
}
167172
: MiniCssExtractPlugin.loader,
168173
{
169-
loader: "css-loader",
174+
loader: 'css-loader',
170175
options: {
171176
modules: {
172-
localIdentName: appConfig.isCssClassNameObfuscationEnabled
173-
? `${voltranConfig.prefix}-[name]-[hash:base64]`
174-
: `${voltranConfig.prefix}-[path][name]__[local]`,
177+
localIdentName: localIndentName,
175178
localIdentHashSalt: packageJson.name
176179
},
177180
importLoaders: 1,
178181
sourceMap: isDebug
179182
}
180183
},
181184
{
182-
loader: "postcss-loader",
185+
loader: 'postcss-loader',
183186
options: postCssConfig
184187
},
185188
{
186-
loader: "sass-loader"
189+
loader: 'sass-loader'
187190
},
188191
...(voltranConfig.sassResources
189192
? [
190-
{
191-
loader: "sass-resources-loader",
192-
options: {
193-
sourceMap: false,
194-
resources: voltranConfig.sassResources
193+
{
194+
loader: 'sass-resources-loader',
195+
options: {
196+
sourceMap: false,
197+
resources: voltranConfig.sassResources
198+
}
195199
}
196-
}
197-
]
200+
]
198201
: [])
199202
]
200203
}
@@ -205,7 +208,7 @@ const clientConfig = merge(commonConfig, voltranClientConfig, {
205208
// emitOnErrors: false,
206209
minimizer: [
207210
new ESBuildMinifyPlugin({
208-
target: "es2015",
211+
target: 'es2015',
209212
css: true
210213
}),
211214
new TerserWebpackPlugin({
@@ -221,24 +224,24 @@ const clientConfig = merge(commonConfig, voltranClientConfig, {
221224

222225
resolve: {
223226
alias: {
224-
"react": path.resolve(process.cwd(), "node_modules/react"),
225-
"react-dom": path.resolve(process.cwd(), "node_modules/react-dom")
227+
react: path.resolve(process.cwd(), 'node_modules/react'),
228+
'react-dom': path.resolve(process.cwd(), 'node_modules/react-dom')
226229
}
227230
},
228231

229232
plugins: [
230233
...(isBuildingForCDN
231234
? []
232235
: [
233-
new CleanWebpackPlugin({
234-
verbose: false,
235-
dangerouslyAllowCleanPatternsOutsideProject: true
236-
})
237-
]),
236+
new CleanWebpackPlugin({
237+
verbose: false,
238+
dangerouslyAllowCleanPatternsOutsideProject: true
239+
})
240+
]),
238241

239242
new webpack.DefinePlugin({
240-
"process.env": {},
241-
"process.env.BROWSER": true,
243+
'process.env': {},
244+
'process.env.BROWSER': true,
242245
__DEV__: isDebug,
243246
GO_PIPELINE_LABEL: JSON.stringify(GO_PIPELINE_LABEL)
244247
}),
@@ -253,19 +256,21 @@ const clientConfig = merge(commonConfig, voltranClientConfig, {
253256
...(isDebug
254257
? [new webpack.HotModuleReplacementPlugin()]
255258
: [
256-
new MiniCssExtractPlugin({
257-
filename: "[name].css",
258-
chunkFilename: "[id]-[contenthash].css"
259-
})
260-
]),
259+
new MiniCssExtractPlugin({
260+
filename: '[name].css',
261+
chunkFilename: '[id]-[contenthash].css'
262+
})
263+
]),
261264

262265
new AssetsPlugin({
263266
path: voltranConfig.inputFolder,
264-
filename: "assets.json",
267+
filename: 'assets.json',
265268
prettyPrint: true
266269
}),
267270

268-
...(appConfig?.bundleAnalyzerStaticEnabled ? [new BundleAnalyzerPlugin({analyzerMode: 'static', openAnalyzer: false})] : [])
271+
...(appConfig?.bundleAnalyzerStaticEnabled
272+
? [new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false })]
273+
: [])
269274
]
270275
});
271276

0 commit comments

Comments
 (0)