Add htmlChunks configuration item (#159)

* feat(ko): add htmlChunks configuration item * docs: add htmlChunks to configuration * docs(changeset): add htmlChunks to configure the chunks of HtmlWebpackPlugin --------- Co-authored-by: jiming <jiming@dtstack.com>
DTStack · Oct 9, 2023 · 63e8926 · 63e8926
1 parent 9ff6509
commit 63e8926
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 3 deletions.
diff --git a/.changeset/fifty-tools-return.md b/.changeset/fifty-tools-return.md
@@ -0,0 +1,5 @@
+---
+'ko': patch
+---
+
+add htmlChunks to configure the chunks of HtmlWebpackPlugin
diff --git a/packages/ko/src/types.ts b/packages/ko/src/types.ts
@@ -15,6 +15,7 @@ export type IOptions = {
   externals?: Record<string, string>;
   plugins?: HookOptions[];
   htmlTemplate?: string;
+  htmlChunks?: 'all' | string[];
   // style configs
   analyzer?: boolean;
   extraPostCSSPlugins?: Plugin[];

diff --git a/packages/ko/src/webpack/plugins.ts b/packages/ko/src/webpack/plugins.ts
@@ -16,11 +16,18 @@ function getPlugins(opts: IWebpackOptions) {
   const {
     isProd,
     htmlTemplate,
+    htmlChunks,
     copy,
     analyzer,
     autoPolyfills,
     serve: { host, port, compilationSuccessInfo },
   } = opts;
+  const htmlOptions: HtmlWebpackPlugin.Options = {
+    template: htmlTemplate,
+  };
+  if (htmlChunks) {
+    htmlOptions.chunks = htmlChunks;
+  }
   return [
     new IgnorePlugin({
       resourceRegExp: /^\.\/locale$/,
@@ -71,9 +78,7 @@ function getPlugins(opts: IWebpackOptions) {
         chunkFilename: 'css/[id].[contenthash].css',
       }),
     new CaseSensitivePathsPlugin(),
-    new HtmlWebpackPlugin({
-      template: htmlTemplate,
-    }),
+    new HtmlWebpackPlugin(htmlOptions),
     copy &&
       new CopyWebpackPlugin({
         patterns: copy,

diff --git a/website/docs/configuration.md b/website/docs/configuration.md
@@ -18,6 +18,7 @@ export type IOptions = {
   externals?: Record<string, string>; //excluding dependencies from the output bundles
   plugins?: any[]; // ko internal plugins, you can define your own plugin of ko.
   htmlTemplate?: string; //output html file template 
+  htmlChunks?: 'all' | string[]; // add only some chunks to html
   // style configs
   analyzer?: boolean; // show output files with an interactive zoomable treemap
   extraPostCSSPlugins?: Plugin[]; // extra post css plugins

diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/configuration.md b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/configuration.md
@@ -18,6 +18,7 @@ export type IOptions = {
   externals?: Record<string, string>; // 从输出的Bundle中需要排除的依赖
   plugins?: any[]; // ko 内部插件，您可以定义自己的 ko 插件。
   htmlTemplate?: string; // 输出 HTML 文件模板
+  htmlChunks?: 'all' | string[]; // 添加到 HTML 中的 chunk
   // 样式配置
   analyzer?: boolean; // 显示带有可缩放的交互式树状图的输出文件
   extraPostCSSPlugins?: Plugin[]; // 额外的 postcss 插件