Multi-Compiler for Vue CLI

0.1.0 verified Fri May 01 auth: no javascript

Vue CLI 3 plugin enabling webpack multi-compiler mode, allowing parallel builds of multiple configs from a single vue-cli project. Current version 0.1.0 targets Node >=8 and Vue CLI 3 ecosystems. Key differentiator: supports both function and array configuration modes for splitting webpack configs, with automatic merging via webpack-merge when using array mode. Low release cadence with no updates since initial release. Use for projects needing multiple entry points or separate build targets from the same Vue CLI setup, such as main + app bundles.

Common errors

error Cannot find module 'webpack-merge' ↓

cause Missing runtime dependency webpack-merge (used internally by array mode).

fix

Run 'npm install webpack-merge --save-dev' or 'yarn add webpack-merge --dev'.

error Property 'configureMultiCompilerWebpack' does not match any schema ↓

cause Misplaced configuration under vue.config.js root instead of pluginOptions.

fix

Wrap config in pluginOptions: { configureMultiCompilerWebpack: ... }

error TypeError: webpackConfig.entry is not iterable ↓

cause Function mode returned a non-array or malformed config array.

fix

Ensure the function returns an array of valid webpack configuration objects.

Warnings

gotcha The plugin only works with Vue CLI 3. It is incompatible with Vue CLI 4+ (no webpack version checks). ↓

fix Use Vue CLI 3 or migrate to @vue/cli-service with custom webpack chain.

deprecated Vue CLI 3 is deprecated. Consider upgrading to Vue CLI 4+ or Vite. ↓

fix Migrate project to Vue CLI 4 or use Vite with custom builds.

gotcha The function mode expects lodash.clonedeep for deep cloning; not providing it will cause reference issues. ↓

fix Install lodash.clonedeep and require it inside the function.

Install

npm install vue-cli-plugin-multi-compiler

yarn add vue-cli-plugin-multi-compiler

pnpm add vue-cli-plugin-multi-compiler

Quickstart

Shows how to add the plugin and configure multiple webpack configs using function mode in vue.config.js.

// Install via Vue CLI
vue add multi-compiler

// In vue.config.js
module.exports = {
  pluginOptions: {
    configureMultiCompilerWebpack: webpackConfig => {
      const cloneDeep = require('lodash.clonedeep');
      const mainConfig = cloneDeep(webpackConfig);
      const appConfig = cloneDeep(webpackConfig);
      mainConfig.entry = { main: './src/main.js' };
      appConfig.entry = { app: './src/app.js' };
      return [mainConfig, appConfig];
    }
  }
};

// Run build
vue-cli-service build