Varie Bundler

3.0.4 · active · verified Sun Apr 19

Varie Bundler, currently at stable version 3.0.4, provides a pre-configured and extensible Webpack setup specifically tailored for Varie framework applications. It abstracts away complex Webpack configurations, offering a fluent API to define common bundling concerns such as web/service workers, proxy URLs, custom Webpack plugins, file copying, and aggressive code splitting. While its explicit release cadence is not publicly documented, the project has undergone significant updates, moving from early 0.x versions to its current 3.x iteration, indicating active development. A key differentiator is its deep integration with the Varie ecosystem, making it an opinionated but highly efficient choice for developers working within that framework, rather than a general-purpose Webpack utility for any JavaScript project.

Common errors

```
Error: Cannot find module 'vue'
```
cause Missing or incompatible Vue peer dependency, required by Varie Bundler.

fix Install or upgrade Vue and vue-template-compiler to compatible versions: `npm install vue@^2 vue-template-compiler@^2` or `yarn add vue@^2 vue-template-compiler@^2`.
```
TypeError: Bundler is not a constructor
```
cause Attempting to instantiate `Bundler` incorrectly, often due to using `import` in a CommonJS context or misinterpreting the export type.

fix Ensure correct import/require syntax. If in a `varie.js` configuration, use `const { Bundler } = require('varie-bundler');`. If in an ESM module, use `import { Bundler } from 'varie-bundler';`.
```
Module not found: Error: Can't resolve './src/main.js' in '...' (or similar path resolution error within Webpack output)
```
cause The Varie Bundler's default configuration or your custom `copy`/`webWorkers` settings are pointing to incorrect or non-existent file paths.

fix Review your `Bundler` instance configuration, specifically methods like `copy()` or `webWorkers()`, to ensure all specified `from` and `to` paths accurately reflect your project's file structure.

Warnings

gotcha Varie Bundler is tightly coupled with the Varie framework. It is not designed as a standalone or general-purpose Webpack configuration tool for arbitrary JavaScript projects.
Fix: Ensure you are developing within a Varie framework application. For non-Varie projects, consider alternative bundler configurations or Webpack utility libraries.
breaking Migration between major versions (e.g., from 0.x to 1.x, or 2.x to 3.x) likely involved significant breaking changes to the configuration API and method signatures. Specific details for all major transitions are not explicitly provided in the truncated release notes.
Fix: Consult the official Varie Bundler documentation or migration guides corresponding to the specific version you are upgrading to. Expect changes in method names, configuration structures, and default behaviors.
gotcha Peer dependencies on Vue 2.x (`vue` and `vue-template-compiler`) must be satisfied for Varie Bundler to function correctly. Installation issues or version mismatches can lead to runtime errors during compilation.
Fix: Install or upgrade 'vue' and 'vue-template-compiler' to compatible versions, typically `npm install vue@^2 vue-template-compiler@^2` or `yarn add vue@^2 vue-template-compiler@^2`.
gotcha Earlier versions (specifically 0.4.4) had known issues related to TypeScript fork instances running incorrectly. While a fix was implemented, complex TypeScript setups may still require careful review.
Fix: Ensure you are using the latest stable version (3.0.4) of `varie-bundler`. If TypeScript issues persist, review your TypeScript configuration, especially regarding `fork-ts-checker-webpack-plugin` if used implicitly or explicitly.

Install

npm install varie-bundler npm
yarn add varie-bundler yarn
pnpm add varie-bundler pnpm

Imports

Bundler
wrong:
```
import { Bundler } from 'varie-bundler';
```
correct:
```
const { Bundler } = require('varie-bundler');
```
The main class for configuring Varie applications. This CommonJS require syntax is typically used within a `varie.js` configuration file as per official documentation.
Bundler
wrong:
```
const { Bundler } = require('varie-bundler');
```
correct:
```
import { Bundler } from 'varie-bundler';
```
ESM import for the `Bundler` class. Suitable for environments where ESM is preferred or required, outside of the specific `varie.js` CommonJS configuration context. Ensure your project is configured for ESM.
BundlerConfigInterface
```
import type { BundlerConfigInterface } from 'varie-bundler';
```
TypeScript interface for the underlying configuration structure managed by the Bundler, valuable for advanced type hinting and extension. This assumes the package exports a type for its configuration.

Quickstart

Demonstrates how to initialize the Varie Bundler within a Varie application's configuration file (`varie.js`) and apply common configurations like file copying, web worker support, proxy setup, aggressive code splitting, and adding a custom webpack plugin.

const { Bundler } = require('varie-bundler');

module.exports = {
  // ... potentially other Varie configuration properties
  bundler: new Bundler()
    .copy([
      { from: './resources/assets/images', to: './dist/images' },
      { from: './public/manifest.json', to: './dist/manifest.json' }
    ])
    .webWorkers() // Enable web worker support
    .proxy('http://localhost:8080') // Set up a proxy server
    .aggressiveSplitting() // Optimize chunk splitting
    .plugin('webpackbar', require('webpackbar')) // Add a custom webpack plugin
    .dontClean(['.gitkeep'])
};

view raw JSON →