# Backport This will backport the following commits from `main` to `8.16`: - [chore(NA): upgrade to webpack 5 (#191106)](https://github.com/elastic/kibana/pull/191106) <!--- Backport version: 9.6.4 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Tiago Costa","email":"tiago.costa@elastic.co"},"sourceCommit":{"committedDate":"2025-02-14T03:01:36Z","message":"chore(NA): upgrade to webpack 5 (#191106)\n\n### Summary\r\n\r\n- Closes #89741\r\n\r\nThis PR contains the resulting work of a massive effort that ports our\r\non top bundler abstraction (called @kbn/optimizer) from Webpack v4 into\r\nWebpack v5. It's essential in terms of long term maintenance since v4\r\nwas not receiving updates any longer but will also unblock some new\r\nfeatures that could be beneficial for our future DevEx endeavours.\r\n\r\nNext you can find a small list of all the accomplished tasks on this\r\njourney.\r\n\r\n### Completed Tasks\r\n- [x] Upgrade dependencies to match the ones on webpack v5\r\n- [x] Fix null-loader usages\r\n- [x] Fix raw-loader usages\r\n- [x] Fix file-loader usages\r\n- [x] Fix url-loader usages\r\n- [x] Fix `@kbn/optimizer-webpack-helpers` to support webpack v5 \r\n- [x] Adopt previous webpack v4 polyfill-all strategy with\r\nnode-polyfill-webpack-plugin\r\n- [x] Fix theme-loader on @kbn/optimizer\r\n- [x] Migrate configurations and ad-hoc loader options on all webpack\r\nconfigs from v4 to v5\r\n- [x] Fix @kbn/test jest resolver for file-loader cases\r\n- [x] Migrate public-path loader on UiSharedDeps\r\n- [x] Fix all usages of webpack-merge\r\n- [x] Migrate BundleRemoteModule\r\n- [x] Migrate BundleRemotesPlugin\r\n- [x] Correctly migrate PopulateBundleCachePlugin\r\n- [x] Correctly migrate BundleMetricsPlugin\r\n- [x] Check if the profiling plugins still work (--profile flag)\r\n- [x] Recover if possible the previous webpack v4 cacheGroup chunks\r\nrename to something like `data.plugin.chunk.0.js`\r\n- [x] Run `/ci` and make sure we get our first green CI, otherwise work\r\non the errors until we do\r\n- [x] Profile and solve bottlenecks until we get a cold build\r\nperformance similar to the one we had on webpack v4 (`node\r\nscripts/build_kibana_platform_plugins --no-cache`).\r\n- [x] OpenSSL Legacy Warnings: try to remove `--openssl-legacy-provider\r\n` flags\r\n- [x] Add Webpack to Renovate config\r\n- [x] Explore removing `NodePolyfillPlugin`\r\n([here](https://www.npmjs.com/package/node-polyfill-webpack-plugin)) and\r\nadd each polyfill needed individually per each webpack config to check\r\nif we get smaller bundles. If we do it's better to go with the case by\r\ncase need approach instead of deploying a bunch of polyfills with\r\nNodePolyfillPlugin. As another alternative, create a custom smaller\r\nplugin with only the union of all needed polyfills.\r\n- [x] Evaluate if we want to touch the resolutions on mainFields and\r\nconditionNames\r\n- [x] Understand why `@import 'src/core/public/mixins'` does not work\r\nanymore (not a problem, we should use relative paths anyway but we want\r\nto track why it changed from v4 to v5)\r\n- [x] BUG: Child compilers are having errors hidden and/or changed from\r\nerror to warning\r\n- [x] Fix license check for\r\n[Artistic-2.0](https://spdx.org/licenses/Artistic-2.0.html) is the\r\nlicense for\r\n[domain-browser](https://github.com/bevry/domain-browser?tab=License-1-ov-file).\r\nThis package is a dependency of\r\n[NodePolyfillPlugin](https://www.npmjs.com/package/node-polyfill-webpack-plugin).\r\nArtistic 2.0 license is [classified as\r\nyellow](https://github.com/elastic/open-source/blob/main/elastic-product-policy.md#yellow-list)\r\nand should only be used for dev dependencies.\r\n- [x] Make sure `resourceQuery: { not: /raw/ }` is not necessary on\r\nother webpack configs like storybook one\r\n- [x] Find what is being wrongly removed by usedExports optimization;\r\nhint: I believe it is identifying a lot of exports inside the sync entry\r\nof plugins as unused exports and removing them. Then `__kbnBootstrap__`\r\ncan't be found\r\n- [x] Rebalance @kbn/optimizer pickMaxWorkerCount\r\n- [x] Re-open the issue to fix sass-warnings\r\n[#190345](https://github.com/elastic/kibana/issues/190345) or downgrade\r\nsass-loader to v10\r\n- [x] Remove previous esm no parse rules\r\n- [x] Confirm esm support is working\r\n- [x] Confirm console override is needed\r\n- [x] Confirm react prod builds on ui shared deps for distributable\r\n- [x] Remove customization for\r\n[xyflow](https://github.com/xyflow/xyflow) from webpack configs\r\n- [x] Clean all the code\r\n- [x] Make sure collected metrics from stats are still aligned with what\r\nwe were collecting before; also verify if the modules used for optimizer\r\ncaches etc are well generated (@kbn/node-libs-browser)\r\n- [x] Fix watch performance\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by: Brad White <brad.white@elastic.co>","sha":"203bc284781cc830049b3f7948c8fcafa8b7d9a1","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["chore","Team:Operations","release_note:skip","Team:Fleet","v9.0.0","backport:all-open","ci:build-webpack-bundle-analyzer","Team:obs-ux-infra_services","v9.1.0"],"title":"chore(NA): upgrade to webpack 5","number":191106,"url":"https://github.com/elastic/kibana/pull/191106","mergeCommit":{"message":"chore(NA): upgrade to webpack 5 (#191106)\n\n### Summary\r\n\r\n- Closes #89741\r\n\r\nThis PR contains the resulting work of a massive effort that ports our\r\non top bundler abstraction (called @kbn/optimizer) from Webpack v4 into\r\nWebpack v5. It's essential in terms of long term maintenance since v4\r\nwas not receiving updates any longer but will also unblock some new\r\nfeatures that could be beneficial for our future DevEx endeavours.\r\n\r\nNext you can find a small list of all the accomplished tasks on this\r\njourney.\r\n\r\n### Completed Tasks\r\n- [x] Upgrade dependencies to match the ones on webpack v5\r\n- [x] Fix null-loader usages\r\n- [x] Fix raw-loader usages\r\n- [x] Fix file-loader usages\r\n- [x] Fix url-loader usages\r\n- [x] Fix `@kbn/optimizer-webpack-helpers` to support webpack v5 \r\n- [x] Adopt previous webpack v4 polyfill-all strategy with\r\nnode-polyfill-webpack-plugin\r\n- [x] Fix theme-loader on @kbn/optimizer\r\n- [x] Migrate configurations and ad-hoc loader options on all webpack\r\nconfigs from v4 to v5\r\n- [x] Fix @kbn/test jest resolver for file-loader cases\r\n- [x] Migrate public-path loader on UiSharedDeps\r\n- [x] Fix all usages of webpack-merge\r\n- [x] Migrate BundleRemoteModule\r\n- [x] Migrate BundleRemotesPlugin\r\n- [x] Correctly migrate PopulateBundleCachePlugin\r\n- [x] Correctly migrate BundleMetricsPlugin\r\n- [x] Check if the profiling plugins still work (--profile flag)\r\n- [x] Recover if possible the previous webpack v4 cacheGroup chunks\r\nrename to something like `data.plugin.chunk.0.js`\r\n- [x] Run `/ci` and make sure we get our first green CI, otherwise work\r\non the errors until we do\r\n- [x] Profile and solve bottlenecks until we get a cold build\r\nperformance similar to the one we had on webpack v4 (`node\r\nscripts/build_kibana_platform_plugins --no-cache`).\r\n- [x] OpenSSL Legacy Warnings: try to remove `--openssl-legacy-provider\r\n` flags\r\n- [x] Add Webpack to Renovate config\r\n- [x] Explore removing `NodePolyfillPlugin`\r\n([here](https://www.npmjs.com/package/node-polyfill-webpack-plugin)) and\r\nadd each polyfill needed individually per each webpack config to check\r\nif we get smaller bundles. If we do it's better to go with the case by\r\ncase need approach instead of deploying a bunch of polyfills with\r\nNodePolyfillPlugin. As another alternative, create a custom smaller\r\nplugin with only the union of all needed polyfills.\r\n- [x] Evaluate if we want to touch the resolutions on mainFields and\r\nconditionNames\r\n- [x] Understand why `@import 'src/core/public/mixins'` does not work\r\nanymore (not a problem, we should use relative paths anyway but we want\r\nto track why it changed from v4 to v5)\r\n- [x] BUG: Child compilers are having errors hidden and/or changed from\r\nerror to warning\r\n- [x] Fix license check for\r\n[Artistic-2.0](https://spdx.org/licenses/Artistic-2.0.html) is the\r\nlicense for\r\n[domain-browser](https://github.com/bevry/domain-browser?tab=License-1-ov-file).\r\nThis package is a dependency of\r\n[NodePolyfillPlugin](https://www.npmjs.com/package/node-polyfill-webpack-plugin).\r\nArtistic 2.0 license is [classified as\r\nyellow](https://github.com/elastic/open-source/blob/main/elastic-product-policy.md#yellow-list)\r\nand should only be used for dev dependencies.\r\n- [x] Make sure `resourceQuery: { not: /raw/ }` is not necessary on\r\nother webpack configs like storybook one\r\n- [x] Find what is being wrongly removed by usedExports optimization;\r\nhint: I believe it is identifying a lot of exports inside the sync entry\r\nof plugins as unused exports and removing them. Then `__kbnBootstrap__`\r\ncan't be found\r\n- [x] Rebalance @kbn/optimizer pickMaxWorkerCount\r\n- [x] Re-open the issue to fix sass-warnings\r\n[#190345](https://github.com/elastic/kibana/issues/190345) or downgrade\r\nsass-loader to v10\r\n- [x] Remove previous esm no parse rules\r\n- [x] Confirm esm support is working\r\n- [x] Confirm console override is needed\r\n- [x] Confirm react prod builds on ui shared deps for distributable\r\n- [x] Remove customization for\r\n[xyflow](https://github.com/xyflow/xyflow) from webpack configs\r\n- [x] Clean all the code\r\n- [x] Make sure collected metrics from stats are still aligned with what\r\nwe were collecting before; also verify if the modules used for optimizer\r\ncaches etc are well generated (@kbn/node-libs-browser)\r\n- [x] Fix watch performance\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by: Brad White <brad.white@elastic.co>","sha":"203bc284781cc830049b3f7948c8fcafa8b7d9a1"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/211145","number":211145,"state":"OPEN"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/191106","number":191106,"mergeCommit":{"message":"chore(NA): upgrade to webpack 5 (#191106)\n\n### Summary\r\n\r\n- Closes #89741\r\n\r\nThis PR contains the resulting work of a massive effort that ports our\r\non top bundler abstraction (called @kbn/optimizer) from Webpack v4 into\r\nWebpack v5. It's essential in terms of long term maintenance since v4\r\nwas not receiving updates any longer but will also unblock some new\r\nfeatures that could be beneficial for our future DevEx endeavours.\r\n\r\nNext you can find a small list of all the accomplished tasks on this\r\njourney.\r\n\r\n### Completed Tasks\r\n- [x] Upgrade dependencies to match the ones on webpack v5\r\n- [x] Fix null-loader usages\r\n- [x] Fix raw-loader usages\r\n- [x] Fix file-loader usages\r\n- [x] Fix url-loader usages\r\n- [x] Fix `@kbn/optimizer-webpack-helpers` to support webpack v5 \r\n- [x] Adopt previous webpack v4 polyfill-all strategy with\r\nnode-polyfill-webpack-plugin\r\n- [x] Fix theme-loader on @kbn/optimizer\r\n- [x] Migrate configurations and ad-hoc loader options on all webpack\r\nconfigs from v4 to v5\r\n- [x] Fix @kbn/test jest resolver for file-loader cases\r\n- [x] Migrate public-path loader on UiSharedDeps\r\n- [x] Fix all usages of webpack-merge\r\n- [x] Migrate BundleRemoteModule\r\n- [x] Migrate BundleRemotesPlugin\r\n- [x] Correctly migrate PopulateBundleCachePlugin\r\n- [x] Correctly migrate BundleMetricsPlugin\r\n- [x] Check if the profiling plugins still work (--profile flag)\r\n- [x] Recover if possible the previous webpack v4 cacheGroup chunks\r\nrename to something like `data.plugin.chunk.0.js`\r\n- [x] Run `/ci` and make sure we get our first green CI, otherwise work\r\non the errors until we do\r\n- [x] Profile and solve bottlenecks until we get a cold build\r\nperformance similar to the one we had on webpack v4 (`node\r\nscripts/build_kibana_platform_plugins --no-cache`).\r\n- [x] OpenSSL Legacy Warnings: try to remove `--openssl-legacy-provider\r\n` flags\r\n- [x] Add Webpack to Renovate config\r\n- [x] Explore removing `NodePolyfillPlugin`\r\n([here](https://www.npmjs.com/package/node-polyfill-webpack-plugin)) and\r\nadd each polyfill needed individually per each webpack config to check\r\nif we get smaller bundles. If we do it's better to go with the case by\r\ncase need approach instead of deploying a bunch of polyfills with\r\nNodePolyfillPlugin. As another alternative, create a custom smaller\r\nplugin with only the union of all needed polyfills.\r\n- [x] Evaluate if we want to touch the resolutions on mainFields and\r\nconditionNames\r\n- [x] Understand why `@import 'src/core/public/mixins'` does not work\r\nanymore (not a problem, we should use relative paths anyway but we want\r\nto track why it changed from v4 to v5)\r\n- [x] BUG: Child compilers are having errors hidden and/or changed from\r\nerror to warning\r\n- [x] Fix license check for\r\n[Artistic-2.0](https://spdx.org/licenses/Artistic-2.0.html) is the\r\nlicense for\r\n[domain-browser](https://github.com/bevry/domain-browser?tab=License-1-ov-file).\r\nThis package is a dependency of\r\n[NodePolyfillPlugin](https://www.npmjs.com/package/node-polyfill-webpack-plugin).\r\nArtistic 2.0 license is [classified as\r\nyellow](https://github.com/elastic/open-source/blob/main/elastic-product-policy.md#yellow-list)\r\nand should only be used for dev dependencies.\r\n- [x] Make sure `resourceQuery: { not: /raw/ }` is not necessary on\r\nother webpack configs like storybook one\r\n- [x] Find what is being wrongly removed by usedExports optimization;\r\nhint: I believe it is identifying a lot of exports inside the sync entry\r\nof plugins as unused exports and removing them. Then `__kbnBootstrap__`\r\ncan't be found\r\n- [x] Rebalance @kbn/optimizer pickMaxWorkerCount\r\n- [x] Re-open the issue to fix sass-warnings\r\n[#190345](https://github.com/elastic/kibana/issues/190345) or downgrade\r\nsass-loader to v10\r\n- [x] Remove previous esm no parse rules\r\n- [x] Confirm esm support is working\r\n- [x] Confirm console override is needed\r\n- [x] Confirm react prod builds on ui shared deps for distributable\r\n- [x] Remove customization for\r\n[xyflow](https://github.com/xyflow/xyflow) from webpack configs\r\n- [x] Clean all the code\r\n- [x] Make sure collected metrics from stats are still aligned with what\r\nwe were collecting before; also verify if the modules used for optimizer\r\ncaches etc are well generated (@kbn/node-libs-browser)\r\n- [x] Fix watch performance\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by: Brad White <brad.white@elastic.co>","sha":"203bc284781cc830049b3f7948c8fcafa8b7d9a1"}},{"url":"https://github.com/elastic/kibana/pull/211146","number":211146,"branch":"8.x","state":"OPEN"},{"url":"https://github.com/elastic/kibana/pull/211147","number":211147,"branch":"8.18","state":"OPEN"},{"url":"https://github.com/elastic/kibana/pull/211148","number":211148,"branch":"8.17","state":"OPEN"}]}] BACKPORT--> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> |
||
---|---|---|
.. | ||
src | ||
index.ts | ||
jest.integration.config.js | ||
kibana.jsonc | ||
package.json | ||
README.md | ||
tsconfig.json |
@kbn/plugin-helpers
Just some helpers for kibana plugin devs.
Installation
You don't actually need to install the plugin helpers, they are automatically inherited from the Kibana project by building your plugin within the Kibana repo. To use the plugin helpers just create the needed npm scripts on your plugin's package.json
(as exemplified below) which
is already the case if you use the new node scripts/generate_plugin
script.
{
"scripts" : {
"build": "yarn plugin-helpers build",
"dev": "yarn plugin-helpers dev",
"plugin-helpers": "node ../../scripts/plugin_helpers",
"kbn": "node ../../scripts/kbn"
}
}
This will make it easier to execute the plugin-helpers
script from within your plugin repository.
yarn kbn bootstrap
Usage
This simple CLI has a build task that plugin devs can run from to easily package Kibana plugins.
Previously you could also use that tool to start and test your plugin. Currently you can run
your plugin along with Kibana running yarn start
in the Kibana repository root folder. Finally to test
your plugin you should now configure and use your own tools.
$ plugin-helpers help
Usage: plugin-helpers [command] [options]
Commands:
build
Copies files from the source into a zip archive that can be distributed for
installation into production Kibana installs. The archive includes the non-
development npm dependencies and builds itself using raw files in the source
directory so make sure they are clean/up to date. The resulting archive can
be found at:
build/{plugin.id}-{kibanaVersion}.zip
Options:
--skip-archive Don't create the zip file, just create the build/kibana directory
--kibana-version, -v Kibana version this plugin will be built for
dev
Builds the current plugin ui browser side so it can be picked up by Kibana
during development.
Options:
--dist, -d Outputs bundles in dist mode instead
--watch, -w Starts the watch mode
Global options:
--verbose, -v Log verbosely
--debug Log debug messages (less than verbose)
--quiet Only log errors
--silent Don't log anything
--help Show this message
Versions
The plugins helpers in the Kibana repo are available for Kibana 6.3 and greater. Just checkout the branch of Kibana you want to build against and the plugin helpers should be up to date for that version of Kibana.
When you're targeting versions before Kibana 6.3, use the @elastic/plugin-helpers
from npm. See the versions section of the @elastic/plugin-helpers
readme for information about version compatibility.
Configuration
plugin-helpers
accepts a number of settings, which can be specified at runtime, or included in a .kibana-plugin-helpers.json
file if you'd like to bundle those settings with your project.
It will also observe a .kibana-plugin-helpers.dev.json
, much like Kibana does, which we encourage you to add to your .gitignore
file and use for local settings that you don't intend to share. These "dev" settings will override any settings in the normal json config.
All configuration setting listed below can simply can be included in the json config files. If you intend to inline the command, you will need to convert the setting to snake case (ie. skipArchive
becomes --skip-archive
).
Global settings
Settings for build
Setting | Description |
---|---|
serverSourcePatterns |
Defines the files that are built with babel and written to your distributable for your server plugin. It is ignored if kibana.json has none server: true setting defined. |
skipArchive |
Don't create the zip file, leave the build path alone |
skipInstallDependencies |
Don't install dependencies defined in package.json into build output |
kibanaVersion |
Kibana version for the build output (added to package.json) |
TypeScript support
Plugin code can be written in TypeScript if desired. To enable TypeScript support create a tsconfig.json
file at the root of your plugin that looks something like this:
{
// extend Kibana's tsconfig, or use your own settings
"extends": "../../tsconfig.json",
// tell the TypeScript compiler where to find your source files
"include": [
"server/**/*",
"public/**/*"
]
}