A Vite plugin to bundle multiple CSS and JavaScript files into a single file and minify it.
npm install vite-multi-bundlerA Vite plugin to bundle multiple CSS and JavaScript files into a single file and minify it.
Right now, this plugin only resolves images that reside in the resources/images directory. In future updates, this feature will be more flexible, and you will be able to place your images in any directory you want. Currently, you have to place the images that are being used in CSS in the resources/images directory.
You can install the vite-multi-bundler using npm:
``sh`
npm install vite-multi-bundler --save-dev
First, import the plugin and add it to your Vite config file:
NOTE: If you want file versioning, you don't need to specify the file_versioning value inside the viteMultiBundler() function as its default value is already set to true.
This will generate the manifest.json inside the /dist
`js
import { defineConfig } from "vite";
import viteMultiBundler from "vite-multi-bundler";
export default defineConfig({
// Note: While giving the file name, you don't need to add the file extension. The plugin handles this automatically on its own.
plugins: [
viteMultiBundler({
file_versioning: true, // default => true
js: [
{
filename: "backend", // after bundling, => backend-[file_version].js
entryPoints: ["src/admin.js", "src/user.js"],
},
{
filename: "bundled.min", // after bundling, => bundled.min-[file_version].js
entryPoints: ["test/roles.js"],
},
],
css: [
{
filename: "common", // after bundling, => common-[file_version].css
entryPoints: ["src/user.css", "src/admin.css"],
},
{
filename: "bundled.min", // after bundling, => bundled.min-[file_version].css
entryPoints: ["test/elements.css"],
},
],
}),
],
});
`
`js
import { defineConfig } from "vite";
import viteMultiBundler from "vite-multi-bundler";
export default defineConfig({
// Note: While giving the file name, you don't need to add the file extension. The plugin handles this automatically on its own.
plugins: [
viteMultiBundler({
file_versioning: false, // default => true
js: [
{
filename: "backend", // after bundling, => backend.js
entryPoints: ["src/admin.js", "src/user.js"],
},
{
filename: "bundled.min", // after bundling, => bundled.min.js
entryPoints: ["test/roles.js"],
},
],
css: [
{
filename: "common", // after bundling, => common.css
entryPoints: ["src/user.css", "src/admin.css"],
},
{
filename: "bundled.min", // after bundling, => bundled.min.css
entryPoints: ["test/elements.css"],
},
],
}),
],
});
`
You can define multiple entry points for each bundle and specify the output directory and filename. In the example above, we define two bundles, one for JavaScript and one for CSS.
Once you have defined your bundles, Vite will automatically generate the bundled files in the specified output directories when you run the npm run build command.
The vite-multi-bundler takes an options object with the following properties:
- file_versioning (Boolean): The default value is true
- If this option is set to true, then the generated file will have a random version number, for example, common-09sx89.js, and it will also generate the manifest.json file.
- If you want the file to be generated without a version number, then set this option to false. It will generate the file with the specified name, such as common.js, and it won't generate the manifest.json file
- js (Array): The options array for the JavaScript bundle
- Object:
- filename (string): The name of the output fileentryPoints
- (string[]): An array of entry points for the JavaScript bundle
- css (Array): The options array for the CSS bundlefilename
- Object
- (string): The name of the output fileentryPoints
- (string[]): An array of entry points for the CSS bundle
Using the vite-multi-bundler` plugin with Vite is a simple and efficient way to generate multiple bundles for your JavaScript and CSS files. With the options provided, you can easily configure the filename and entry points for each bundle, making it easy to customize your build process to fit your project's needs.
This project is open source, and you are welcome to contribute if you want.