I currently have multiple Vue projects alongside a Wordpress project. One of the Vue projects is built with Webpack, while the other one is built with Vite.
The folder structure is as follows:
project
|
|__vue-project-webpack
| |
| |__dist
|
|__vue-project-vite
| |
| |__dist
|
|__wordpress project
|
|__target
The files in the Vue projects' `dist` folders are used in the `wordpress/target` folder.
However, I am facing an issue with copying build files from the Vite project's `dist` folder to the `target` folder of the Wordpress project. Currently, this task is being done manually.
In the webpack project, the fsTest library handles this:
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
config.output.filename = 'js/webpack-[name].js';
config.output.chunkFilename = 'js/webpack-[name].js';
}
config.plugins = [
...config.plugins,
{
apply: (compiler) => {
compiler.hooks.afterEmit.tap('AfterEmitPlugin', () => {
const webpackAssets = [
{
source: `${PATHS.dist}/js/webpack-app.js`,
dest: `${PATHS.wpAssets}/js/webpack-app.js`,
},
];
const options = { overwrite: true };
webpackAssets.forEach(item => {
fsTest.copy(item.source, item.dest, options, err => {
if (err) return console.error(err);
console.log('Copy build success!');
});
});
});
},
},
];
},
I am struggling to find a similar solution in Vite, as all file copy plugins run before the build rather than after. Is there a way to execute them post-build completion?
Furthermore, the files generated have hashed names like index-d8c14379.css. Is there a method to rename them to something like vite-app-styles.css?