ROX-29843: Minimal webpack config to build OCP dynamic plugin#15944
Merged
ROX-29843: Minimal webpack config to build OCP dynamic plugin#15944
Conversation
Contributor
Author
|
This change is part of the following stack: Change managed by git-spice. |
|
Skipping CI for Draft Pull Request. |
Contributor
|
Caution There are some errors in your PipelineRun template.
|
dvail
commented
Jul 8, 2025
dvail
commented
Jul 8, 2025
dvail
commented
Jul 8, 2025
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #15944 +/- ##
==========================================
+ Coverage 48.66% 48.69% +0.03%
==========================================
Files 2606 2606
Lines 191745 191760 +15
==========================================
+ Hits 93305 93372 +67
+ Misses 91100 91055 -45
+ Partials 7340 7333 -7
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
2443ef3 to
d0060b9
Compare
Contributor
|
Images are ready for the commit at 864f29d. To use with deploy scripts, first |
ed1222f to
24c3566
Compare
dvail
commented
Jul 15, 2025
dvail
commented
Jul 15, 2025
Contributor
There was a problem hiding this comment.
Hey @dvail - I've reviewed your changes - here's some feedback:
- Add output.clean: true or use CleanWebpackPlugin in webpack.ocp-plugin.config.js to automatically purge stale build artifacts before each build.
- Consolidate your alias mappings by sharing tsconfig paths or a common config module instead of duplicating resolve.alias definitions.
- Move the consolePlugin metadata out of package.json into console-extensions.json to centralize plugin configuration and align with console conventions.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Add output.clean: true or use CleanWebpackPlugin in webpack.ocp-plugin.config.js to automatically purge stale build artifacts before each build.
- Consolidate your alias mappings by sharing tsconfig paths or a common config module instead of duplicating resolve.alias definitions.
- Move the consolePlugin metadata out of package.json into console-extensions.json to centralize plugin configuration and align with console conventions.
## Individual Comments
### Comment 1
<location> `ui/apps/platform/webpack.ocp-plugin.config.js:42` </location>
<code_context>
+ rules: [
+ {
+ test: /\.(jsx?|tsx?)$/,
+ exclude: /\/node_modules\//,
+ use: [
+ {
</code_context>
<issue_to_address>
The RegExp for 'exclude' may not match all node_modules paths as intended.
The current RegExp may not exclude all node_modules directories, particularly on Windows or with nested paths. Consider a more general pattern like /node_modules/ or simply 'node_modules' for better compatibility.
</issue_to_address>
<suggested_fix>
<<<<<<< SEARCH
exclude: /\/node_modules\//,
=======
exclude: /node_modules/,
>>>>>>> REPLACE
</suggested_fix>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
24c3566 to
463c840
Compare
dvail
commented
Jul 17, 2025
463c840 to
5aa0b7b
Compare
9 tasks
5aa0b7b to
88618e9
Compare
4 tasks
d25ece2 to
404a6ce
Compare
This was referenced Jul 18, 2025
404a6ce to
a3f0366
Compare
88618e9 to
9c07abb
Compare
a3f0366 to
e952125
Compare
9c07abb to
25da342
Compare
Base automatically changed from
dv/ROX-29846-revert-to-react-router-v5-compat-layer
to
master
July 23, 2025 19:10
25da342 to
e381ca8
Compare
dvail
commented
Jul 23, 2025
ui/apps/platform/src/ConsolePlugin/SecurityVulnerabilitiesPage/Index.tsx
Show resolved
Hide resolved
dvail
commented
Jul 23, 2025
Contributor
There was a problem hiding this comment.
Hey @dvail - I've reviewed your changes and they look great!
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location> `ui/apps/platform/webpack.ocp-plugin.config.js:5` </location>
<code_context>
+const { ConsoleRemotePlugin } = require('@openshift-console/dynamic-plugin-sdk-webpack');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const isProd = process.env.NODE_ENV === 'production';
+
+const config = {
</code_context>
<issue_to_address>
Consider splitting the webpack config into common, dev, and prod files and using TsconfigPathsPlugin to simplify and modularize the setup.
You can dramatically cut down on branching, aliases and boilerplate by splitting into a “common/dev/prod” trio and re-using your TS paths via `TsconfigPathsPlugin`. Here’s one way to start:
1. **Install new deps**
```bash
npm install --save-dev webpack-merge tsconfig-paths-webpack-plugin
```
2. **webpack.common.js**
```js
// webpack.common.js
const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const { ConsoleRemotePlugin } = require('@openshift-console/dynamic-plugin-sdk-webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
context: path.resolve(__dirname, 'src'),
entry: {},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
plugins: [new TsconfigPathsPlugin({ configFile: './tsconfig.json' })],
},
module: {
rules: [
{
test: /\.[jt]sx?$/,
exclude: /node_modules/,
use: [{ loader: 'ts-loader', options: { transpileOnly: true } }],
},
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{
test: /\.(png|jpe?g|gif|svg|woff2?|ttf|eot|otf)$/,
type: 'asset/resource',
},
{ test: /\.m?js$/, resolve: { fullySpecified: false } },
],
},
plugins: [
new ConsoleRemotePlugin({
validateSharedModules: false,
pluginMetadata: { /* …same metadata… */ },
extensions: [/* …same extensions… */],
}),
new CopyWebpackPlugin({
patterns: [{ from: 'locales', to: 'locales', noErrorOnMissing: true }],
}),
],
};
```
3. **webpack.dev.js**
```js
// webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common');
module.exports = merge(common, {
mode: 'development',
devtool: 'source-map',
output: {
path: path.resolve(__dirname, 'build/static/ocp-plugin'),
filename: '[name]-bundle.js',
chunkFilename: '[name]-chunk.js',
},
devServer: {
port: 9001,
allowedHosts: 'all',
headers: { 'Access-Control-Allow-Origin': '*' },
devMiddleware: { publicPath: '/' },
},
optimization: { chunkIds: 'named' },
});
```
4. **webpack.prod.js**
```js
// webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common');
module.exports = merge(common, {
mode: 'production',
output: {
path: path.resolve(__dirname, 'build/static/ocp-plugin'),
filename: '[name]-bundle-[contenthash].min.js',
chunkFilename: '[name]-chunk-[contenthash].min.js',
},
devtool: false,
optimization: { minimize: true, chunkIds: 'deterministic' },
});
```
5. **package.json scripts**
```json
{
"scripts": {
"start": "webpack serve --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
}
}
```
This removes all those inline `isProd` checks, you get clean shared rules/plugins, full reuse of your `tsconfig.json` paths, and clear separation of dev/prod concerns.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
dvail
commented
Jul 24, 2025
|
@dvail: The following tests failed, say
Full PR test history. Your PR dashboard. DetailsInstructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here. |
ui/apps/platform/src/ConsolePlugin/SecurityVulnerabilitiesPage/Index.tsx
Show resolved
Hide resolved
pedrottimark
approved these changes
Jul 24, 2025
Stringy
pushed a commit
that referenced
this pull request
Aug 15, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds webpack configuration and required dependencies to build a "Hello world" OCP plugin.
User-facing documentation
Testing and quality
Automated testing
Test running the plugin with webpack in development mode:
Test building the plugin for production with webpack:
Verify that our code is available in plugin files: