vue-cli-plugin-multi-compiler's Introduction

vue-cli-plugin-multi-compiler

Vue CLI 3 plugin to add support for webpack multi-compiler mode

Getting Started

vue add multi-compiler

Configure

This plugin provides an option (configureMultiCompilerWebpack) in vue.config.js to tweak original vue cli webpack config into multiple configs.

You can use either a function or an array:

function usage

module.exports = {
  pluginOptions: {
    configureMultiCompilerWebpack: webpackConfig => {
      // `webpackConfig` here is the one resolved by vue cli.
      // (**after** executing `configureWebpack` and `chainWebpack`)
      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 an array to invoke webpack multi-compiler mode
      return [mainConfig, appConfig]
    }
  }
}

array usage

module.exports = {
  pluginOptions: {
    configureMultiCompilerWebpack: [
      // configurations here will be merged with original webpack config
      // by `webpack-merge`
      {
        entry: {
          main: './src/main.js'
        }
      },
      {
        entry: {
          app: './src/app.js'
        }
      }
    ]
  }
}

vue-cli-plugin-multi-compiler's People

Contributors

Stargazers

Watchers

vue-cli-plugin-multi-compiler's Issues

Plugin not used in development build?

Hi,

Thanks for this plugin, it solves exactly the problem I had.

One thing though - the plugin seems to be ignored for the development builds?

In the vue.config.js I have:

  pluginOptions: {
    configureMultiCompilerWebpack: webpackConfig => {
      console.log('MULTI')

      process.exit()

Then, for production build, the plugin outputs the "MULTI" and exits the build, as expected:

$ npx vue-cli-service build --mode production

⠋  Building for production...MULTI
nickolay@outpost:~/workspace/Bryntum/vuestic-admin

But for development builds, it happily build the whole project - seems the plugin is ignored?

nickolay@outpost:~/workspace/Bryntum/vuestic-admin$ npx vue-cli-service build --mode dev

 65% building modules 1273/1368 modules 95 active ...uesticIcon.vue?vue&type=script&lang=js&DEPRECATION WARNING on line 1, column 8 of /home/nickolay/workspace/Bryntum/vuestic-admin/src/vuestic-theme/vuestic-sass/global/_reset.scss:
Including .css files with @import is non-standard behaviour which will be removed in future versions of LibSass.
Use a custom importer to maintain this behaviour. Check your implementations documentation on how to create a custom importer.

 98% after emitting CopyPlugin

 DONE  Compiled successfully in 17795ms

Or am I missing something?

Recommend Projects