feat: conversion of html generated by html-webpack-plugin (#88)

* refactor: AST

* refactor: html generation

* feat: html-webpack-plugin conversion in webpack.config.js

* feat: modify title & meta

* feat: template content & template parameters

* feat: transformer for vue

* feat: default values

* feat: AST for configureWebpack in vue.config.js

* fix: webpack.plugin is undefined

* refactor: ast parser

* feat: AST for webpack config transformation

* fix: html plugin in webpack project

* fix: AST for index.html

* test: update to compatible with feature

* docs: add description

* refactor: change module name and add comment

* fix: html plugin option merging & guard

* refactor: merge config as params for AST transformer

* test: add test use cases

* fix: vue config parse

* test: fix CI failure

* fix: code review

* fix: parse webpack node which was declared as function

* refactor: ast reparse file

* feat: initialize html plugin options with ast

* test: add use case for ast parser

* fix: resolve conversations

README-zh.md

@@ -103,19 +103,19 @@ Options:
 * ⚠️ B10: CSS Modules
   * 在 vite 中，任何以 `.module.css` 为后缀名的 CSS 文件都被认为是一个 CSS modules 文件
   * 这意味着您需要将以 `.css` 为后缀的文件转换为以 `.module.css` 为后缀的文件来实现 CSS Modules
-* ⚠️ B11: 插件暴露的默认值
-  * 当 `index.html` 包含 `htmlWebpackPlugin.options.variableName` 时，会出现 `htmlWebpackPlugin is not defined` 错误，您需要在 `vite.config.js` 中添加插件选项：
-
-  ```
+* ✅ B11: `html-webpack-plugin` 支持
+  * 插件选项将被应用至 `vite-plugin-html` 插件
+  * 注入到 `index.html` 中的变量将被转换。例如，`<%= htmlWebpackPlugin.options.title %>` -> `<%= title %>`
+  * 从 `html-webpack-plugin` 中引用 `injectHtml` 和 `minifyHtml` 并且配置选项：
+  ```js
   plugins: [
-    injectHtml:({
-      injectData: {
-        htmlWebpackPlugin: {
-          options: {
-            variableName: value
-          }
-        }
+    injectHtml({
+      data: {
+        title: value
       }
+    }),
+    minifyHtml({
+      minifyCss: true
     })
   ]
   ```
@@ -187,6 +187,10 @@ Options:
     }
   }
   ```
+* ✅ V08: 转换函数形式的 webpack 配置
+  * `vue.config.js` 模块中的 `webpackConfigure` 和 `chainWebpack` 选项可以定义为对象或者函数
+  * 为了避免在调用这些函数时报错，我们按需初始化 `config` 选项，并且生成一个临时文件(`vue.temp.config.js`)来重新配置 `html-webpack-plugin`
+
 ### Webpack 转换项
 > Webpack 转换是将`webpack.config.js` 或 `webpack.base.js/webpack.dev.js/webpack.prod.js` 或 `webpack.build.js/webpack.production.js` 中的配置，转换后设置到 `vite.config.js` 中
 

README.md

@@ -101,18 +101,19 @@ Legend of annotations:
 * ⚠️ B10: CSS Modules
   * In vite, any CSS files ending with `.module.css` is considered a CSS modules file
   * That means you need to covert files with extension of `.css` to files with extension of `.module.css` to implement CSS Modules
-* ⚠️ B11: default values exposed by plugins
-  * The error `htmlWebpackPlugin is not defined` may occur if `index.html` includes `htmlWebpackPlugin.options.variableName`. You need to add a plugin in `vite.config.js` like this:
+* ✅ B11: `html-webpack-plugin` is supported
+  * Options will be applied to plugin `vite-plugin-html`
+  * Variables injected to `index.html` will be transformed. for example, `<%= htmlWebpackPlugin.options.title %>` -> `<%= title %>`
+  * Import `injectHtml` and `minifyHtml` from `html-webpack-plugin` and use them like this:
   ```js
   plugins: [
-    injectHtml: ({
-      injectData: {
-        htmlWebpackPlugin: {
-          options: {
-            variableName: value
-          }
-        }
+    injectHtml({
+      data: {
+        title: value
       }
+    }),
+    minifyHtml({
+      minifyCss: true
     })
   ]
   ```
@@ -177,6 +178,9 @@ Legend of annotations:
     }
   }
   ```
+* ✅ V08: transform functional webpack config
+  * The `webpackConfigure` and `chainWebpack` options could be defined as object or function in `vue.config.js` module
+  * To avoid calling error when they were functional, we initialize config options and generate a temporary file (`vue.temp.config.js`) to reconfig `html-webpack-plugin`
 
 ### Webpack conversion
 > Webpack conversion is based on `webpack.config.js` or `webpack.base.js/webpack.dev.js/webpack.prod.js` or `webpack.build.js/webpack.production.js`, map configuration to `vite.config.js`

package.json

@@ -57,7 +57,7 @@
     "vite": "^2.7.10",
     "vite-plugin-env-compatible": "^1.0.0",
     "vite-plugin-vue2": "^1.6.2",
-    "vitest": "^0.0.139",
+    "vitest": "^0.3.4",
     "vue-loader": "^15.9.7",
     "webpack": "^5.59.1",
     "yorkie": "^2.0.0"
@@ -69,6 +69,7 @@
     "commander": "^7.2.0",
     "ejs": "^3.1.6",
     "globby": "^11.0.3",
+    "html-webpack-plugin": "^5.5.0",
     "jscodeshift": "^0.12.0",
     "semver": "^7.3.5",
     "table": "^6.7.1",