Skip to content

Commit f9adb8d

Browse files
himdelhimdel
committed
webpack - drop shared config, redo locally, clean up
fcc 6 seems to insist on pf5 and apparently also fec.config.js makes sense for master, but simplifying for stable branches
1 parent bb26585 commit f9adb8d

7 files changed

+425
-2391
lines changed

‎.babelrc

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
"@babel/preset-typescript",
66
],
77
"plugins": [
8-
"@babel/plugin-syntax-dynamic-import",
98
"@babel/plugin-transform-runtime",
109
"babel-plugin-macros",
1110
]

‎config/standalone.dev.webpack.config.js

-3
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,6 @@ module.exports = webpackBase({
2525
// Serve the UI over http or https. Options: true, false
2626
UI_USE_HTTPS: false,
2727

28-
// Enables webpack debug mode. Options: true, false
29-
UI_DEBUG: true,
30-
3128
// Login URI to allow stand alone with and without keycloak
3229
UI_EXTERNAL_LOGIN_URI: uiExternalLoginURI,
3330

‎config/standalone.prod.webpack.config.js

-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ module.exports = webpackBase({
77
API_BASE_PATH: '/api/galaxy/',
88
UI_BASE_PATH: '/ui/',
99
UI_USE_HTTPS: false,
10-
UI_DEBUG: false,
1110
UI_EXTERNAL_LOGIN_URI: '/login',
1211
WEBPACK_PUBLIC_PATH: '/static/galaxy_ng/',
1312
});

‎config/webpack.base.config.js

+83-90
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1-
const { resolve } = require('path'); // node:path
2-
const config = require('@redhat-cloud-services/frontend-components-config');
3-
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
1+
const { resolve } = require('node:path');
2+
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
3+
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
44
const HtmlWebpackPlugin = require('html-webpack-plugin');
5+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
56
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
6-
const { execSync } = require('child_process'); // node:child_process
7-
8-
const isBuild = process.env.NODE_ENV === 'production';
7+
const { execSync } = require('node:child_process');
8+
const webpack = require('webpack');
99

1010
// NOTE: This file is not meant to be consumed directly by weback. Instead it
1111
// should be imported, initialized with the following settings and exported like
1212
// a normal webpack config. See config/standalone.dev.webpack.config.js for an
1313
// example
1414

15+
const isBuild = process.env.NODE_ENV === 'production';
16+
1517
// only run git when HUB_UI_VERSION is NOT provided
1618
const gitCommit =
1719
process.env.HUB_UI_VERSION ||
@@ -33,7 +35,6 @@ const defaultConfigs = [
3335
{ name: 'UI_EXTERNAL_LOGIN_URI', default: '/login', scope: 'global' },
3436

3537
// Webpack scope: only available in customConfigs here, not exposed to the UI
36-
{ name: 'UI_DEBUG', default: false, scope: 'webpack' },
3738
{ name: 'UI_PORT', default: 8002, scope: 'webpack' },
3839
{ name: 'UI_USE_HTTPS', default: false, scope: 'webpack' },
3940
{ name: 'WEBPACK_PROXY', default: undefined, scope: 'webpack' },
@@ -45,51 +46,52 @@ module.exports = (inputConfigs) => {
4546
const globals = {};
4647

4748
defaultConfigs.forEach((item) => {
48-
// == will match null and undefined, but not false
49-
if (inputConfigs[item.name] == null) {
50-
customConfigs[item.name] = item.default;
51-
} else {
52-
customConfigs[item.name] = inputConfigs[item.name];
53-
}
54-
if (item.scope === 'global') {
55-
globals[item.name] = JSON.stringify(
56-
inputConfigs[item.name] || item.default,
57-
);
58-
}
49+
customConfigs[item.name] = inputConfigs[item.name] ?? item.default;
5950
});
6051

52+
defaultConfigs
53+
.filter(({ scope }) => scope === 'global')
54+
.forEach((item) => {
55+
globals[item.name] = JSON.stringify(customConfigs[item.name]);
56+
});
57+
6158
// 4.6+: pulp APIs live under API_BASE_PATH now, ignore previous overrides
6259
globals.PULP_API_BASE_PATH = JSON.stringify(
6360
customConfigs.API_BASE_PATH + 'pulp/api/v3/',
6461
);
6562

66-
const { config: webpackConfig, plugins } = config({
67-
rootFolder: resolve(__dirname, '../'),
68-
definePlugin: globals,
69-
debug: customConfigs.UI_DEBUG,
70-
https: customConfigs.UI_USE_HTTPS,
71-
72-
// defines port for dev server
73-
port: customConfigs.UI_PORT,
74-
75-
// frontend-components-config 4.5.0+: don't remove patternfly from builds
76-
bundlePfModules: true,
77-
78-
// frontend-components-config 4.6.25-29+: ensure hashed filenames
79-
useFileHash: true,
80-
});
81-
82-
// Override sections of the webpack config to work with TypeScript
83-
const newWebpackConfig = {
84-
...webpackConfig,
85-
86-
// override from empty
63+
return {
8764
devtool: 'source-map',
8865

66+
...(isBuild
67+
? {}
68+
: {
69+
devServer: {
70+
allowedHosts: 'all',
71+
client: { overlay: false },
72+
devMiddleware: { writeToDisk: true },
73+
historyApiFallback: true,
74+
host: '0.0.0.0',
75+
hot: false,
76+
https: customConfigs.UI_USE_HTTPS,
77+
liveReload: true,
78+
magicHtml: false,
79+
onListening: (server) =>
80+
console.log(
81+
'App should run on:',
82+
`${server.options.https ? 'https' : 'http'}://localhost:${
83+
server.options.port
84+
}`,
85+
),
86+
port: customConfigs.UI_PORT,
87+
proxy: customConfigs.WEBPACK_PROXY,
88+
static: { directory: resolve(__dirname, '../dist') },
89+
},
90+
}),
91+
92+
entry: { App: resolve(__dirname, '../src/entry-standalone.tsx') },
93+
mode: isBuild ? 'production' : 'development',
8994
module: {
90-
...webpackConfig.module,
91-
92-
// override to drop ts-loader
9395
rules: [
9496
{
9597
test: /src\/.*\.(js|jsx|ts|tsx)$/,
@@ -108,64 +110,55 @@ module.exports = (inputConfigs) => {
108110
type: 'asset/resource',
109111
generator: { filename: 'fonts/[name][ext][query]' },
110112
},
113+
{ test: /\.mjs$/, include: /node_modules/, type: 'javascript/auto' },
111114
],
112115
},
113-
116+
output: {
117+
filename: 'js/[name].[fullhash].js',
118+
path: resolve(__dirname, '../dist'),
119+
publicPath: customConfigs.WEBPACK_PUBLIC_PATH ?? '/',
120+
chunkFilename: 'js/[name].[fullhash].js',
121+
},
122+
plugins: [
123+
// sourcemaps
124+
new webpack.SourceMapDevToolPlugin({
125+
exclude: /node_modules/,
126+
filename: 'sourcemaps/[name].[contenthash].js.map',
127+
}),
128+
// extract css in prod
129+
isBuild &&
130+
new MiniCssExtractPlugin({
131+
filename: 'css/[name].[contenthash].css',
132+
}),
133+
// clean dist/
134+
new CleanWebpackPlugin({
135+
cleanOnceBeforeBuildPatterns: ['**/*', '!index.html'],
136+
}),
137+
// define global vars
138+
new webpack.DefinePlugin(globals),
139+
// typescript check
140+
new ForkTsCheckerWebpackPlugin(),
141+
// inject src/index.html
142+
new HtmlWebpackPlugin({
143+
applicationName: customConfigs.APPLICATION_NAME,
144+
favicon: 'static/images/favicon.ico',
145+
template: resolve(__dirname, '../src/index.html'),
146+
}),
147+
// @patternfly/react-code-editor
148+
new MonacoWebpackPlugin({
149+
languages: ['yaml'],
150+
}),
151+
].filter(Boolean),
114152
resolve: {
115-
...webpackConfig.resolve,
116-
117-
// override to support jsx, drop scss
118-
extensions: ['.ts', '.tsx', '.js', '.jsx'],
119-
153+
extensions: ['.js', '.jsx', '.ts', '.tsx'],
120154
alias: {
121-
...webpackConfig.resolve.alias,
122-
123155
// imports relative to repo root
124156
src: resolve(__dirname, '../src'),
125157
},
126158
},
127-
128-
// ignore editor files when watching
129159
watchOptions: {
160+
// ignore editor files when watching
130161
ignored: ['**/.*.sw[po]'],
131162
},
132163
};
133-
134-
if (customConfigs.WEBPACK_PROXY) {
135-
newWebpackConfig.devServer.proxy = customConfigs.WEBPACK_PROXY;
136-
}
137-
138-
if (customConfigs.WEBPACK_PUBLIC_PATH) {
139-
console.log(`New output.publicPath: ${customConfigs.WEBPACK_PUBLIC_PATH}`);
140-
newWebpackConfig.output.publicPath = customConfigs.WEBPACK_PUBLIC_PATH;
141-
}
142-
143-
console.log('Overriding configs for standalone mode.');
144-
145-
const newEntry = resolve(__dirname, '../src/entry-standalone.tsx');
146-
console.log(`New entry.App: ${newEntry}`);
147-
newWebpackConfig.entry.App = newEntry;
148-
149-
// ForkTsCheckerWebpackPlugin is part of default config since @redhat-cloud-services/frontend-components-config 4.6.24
150-
151-
// keep HtmlWebpackPlugin for standalone, inject src/index.html
152-
plugins.push(
153-
new HtmlWebpackPlugin({
154-
applicationName: customConfigs.APPLICATION_NAME,
155-
favicon: 'static/images/favicon.ico',
156-
template: resolve(__dirname, '../src/index.html'),
157-
}),
158-
);
159-
160-
// @patternfly/react-code-editor
161-
plugins.push(
162-
new MonacoWebpackPlugin({
163-
languages: ['yaml'],
164-
}),
165-
);
166-
167-
return {
168-
...newWebpackConfig,
169-
plugins,
170-
};
171164
};

0 commit comments

Comments
 (0)