vfe build cli, base on webpack & gulp.

Usage no npm install needed!

<script type="module">
  import vfem from 'https://cdn.skypack.dev/vfem';



vfe is a components builder with specified directory structure, base on webpack and gulp.


See example.


npm install vfe --save

Using with gulp build tool, create a gulpfile.js file

var gulp = require('gulp')
var builder = require('vfe')

gulp.task('default', function () {
    return builder({
            entry: './index.js',
            libs: './lib/*.js'

Project folders specification:

 |   |
 |   |___/header
 |       |
 |       |____header.css
 |       |
 |       |____header.js
 |       |
 |       |____header.tpl
 |       |
 |       |___/images
 |           |____icon.png
  • c/

    Component modules directory, default is "/c". Using require("$componentName") to load module, such as load header module: require("header") will auto load header.css and header.js.

    Note: It can be replaced of custom_directory using modulesDirectories option. See

  • lib/

    Non-modularized js will concat with components' bundle file.

  • index.js

    Components entry js.

Require rules

  • require("/$components_modules/name/$resource.js")

    Component resources absolute path.

  • require("$name")

    Short name of "/$components_modules/name/$name.js".

  • require("$dir/$name")

    Short name of "/$components_modules/dir/$name/$name.js".

  • require("./$name.tpl")

    Load html template file as a string module.

See more usage

Custom modules directory

    entry: './index.js',
    libs: './lib/*.js',
    modulesDirectories: ['c', 'custom_modules']

If you don't want use "/c" as component modules directory, overwrite it:

    modulesDirectories: ['components'] // use "/components" as modules directory

## Command line

Install cli
npm install vfe -g

Init project using vfe-template

vfe init

Note: Using proxy option, vfe init -p $proxy. Such as vfe init -p tx. See $tx

Run default build task


Start develop watcher

vfe start

Note: Start command support run with another task name, such as vfe start sometask, only if task name is start-sometask.

Releasing for production

vfe release

Note: Release command support run with another task name, such as vfe release sometask, only if task name is release-sometask.


Vfe config

    vfeLoaders: {
        tpl: {},   // html-loader, default match: *.tpl
        css: {},   // css-loader,  default match: *.css
        image: {}, // file-loader, default match: png|jpg|gif|jpeg|webp


Using as vfe(options) , options will be passed through to webpack function.