fix: multi-page different usage of filename and template

[ThornWalli]

Hello,

I am currently trying Multi-Entrypoints with multi Page templates.

Unfortunately I found that something is difficult to get running. After I had it then however, I had to determine... That certain things in the Plugin are not correctly assigned.

This is about the two properties template and filename. According to the code there seems to be inconsistencies. When and where the template or filename is accessed, is somewhat inconsistent.

I have expanded the places in this PR, but somehow there seems to be an inconsistency in it.

vite-plugin-html/packages/core/src/htmlPlugin.ts

Lines 297 to 299 in 841d4ef

	const page = pages.filter((page) => {
	return path.resolve('/' + page.template) === path.resolve('/' + htmlName)
	})?.[0]

vite-plugin-html/packages/core/src/htmlPlugin.ts

Lines 322 to 346 in 841d4ef

	function createRewire(
	reg: string,
	page: any,
	baseUrl: string,
	proxyUrlKeys: string[],
	) {
	return {
	from: new RegExp(`^/${reg}*`),
	to({ parsedUrl }: any) {
	const pathname: string = parsedUrl.pathname
	const excludeBaseUrl = pathname.replace(baseUrl, '/')
	const template = path.resolve(baseUrl, page.template)
	if (excludeBaseUrl === '/') {
	return template
	}
	const isApiUrl = proxyUrlKeys.some((item) =>
	pathname.startsWith(path.resolve(baseUrl, item)),
	)
	return isApiUrl ? excludeBaseUrl : template
	},
	}
	}

What is this? If I replace the template there with filename, this then works and copies the HTML files to the root level, where folder structure is needed.

vite-plugin-html/packages/core/src/htmlPlugin.ts

Lines 120 to 164 in 841d4ef

	async closeBundle() {
	const outputDirs: string[] = []
	if (isMpa(viteConfig) || pages.length) {
	for (const page of pages) {
	const dir = path.dirname(page.template)
	if (!ignoreDirs.includes(dir)) {
	outputDirs.push(dir)
	}
	}
	} else {
	const dir = path.dirname(template)
	if (!ignoreDirs.includes(dir)) {
	outputDirs.push(dir)
	}
	}
	const cwd = path.resolve(viteConfig.root, viteConfig.build.outDir)
	const htmlFiles = await fg(
	outputDirs.map((dir) => `${dir}/*.html`),
	{ cwd: path.resolve(cwd), absolute: true },
	)
	await Promise.all(
	htmlFiles.map((file) =>
	fs.move(file, path.resolve(cwd, path.basename(file)), {
	overwrite: true,
	}),
	),
	)
	const htmlDirs = await fg(
	outputDirs.map((dir) => dir),
	{ cwd: path.resolve(cwd), onlyDirectories: true, absolute: true },
	)
	await Promise.all(
	htmlDirs.map(async (item) => {
	const isEmpty = await isDirEmpty(item)
	if (isEmpty) {
	return fs.remove(item)
	}
	}),
	)
	},
	}
	}

---

My Example:

Config

{
  minify: false,
  pages: [
    {
      entry: './main.js',
      filename: 'src/banners/300x250/index.html',
      template: 'banners/300x250/index.html',
      injectOptions: {
        data: {
          title: 'Index'
        }
      }
    },
    {
      entry: './main.js',
      filename: 'src/banners/800x250/index.html',
      template: 'banners/800x250/index.html',
      injectOptions: {
        data: {
          title: 'Index'
        }
      }
    }
  ]
}

1. in dev the redirection to filename is correct. (e.g. http://localhost:3000/banners/300x250/index.html)
2. in the build as long as closeBundle is not adjusted, I get now the output in the build, unfortunately I do not know how to remove the src path in the generated files. (Background: Everything that is programmed is in the src folder).