Boost Front‑End Development with KO: Fast Webpack Scaffold Guide

Overview

KO is a Webpack‑based scaffolding tool that provides ready‑made configuration, multi‑page application support, optional Vue single‑file component development, resource chunking for first‑screen performance, and built‑in SFTP deployment.

Installation

Note: The first installation may take a long time because of many dependencies. Use the Taobao npm registry for faster downloads and set SASS_BINARY_SITE to obtain a pre‑compiled node‑sass package.

SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install -g ko3 --registry=https://registry.npm.taobao.org

Usage

# Initialize a project
ko3 init demo

# Preview the generated <em>helloworld</em> project
cd demo && ko3 serve helloworld

# Show help information
ko3 --help

Basic Directory Structure

demo                     // project root
├── mod                // shared modules
├── page               // entry points
│   └── helloworld     // example project
│       ├── _js        // auto‑generated JS entry (ignore)
│       ├── mod        // private Vue modules (*.vue)
│       ├── utils      // private utilities
│       └── *.shtml    // HTML entry files
└── ko.config.js       // basic configuration, including publish path

Component Development

<template>
  <h1>Hello {{ name }}!</h1>
</template>

<script>
export default {
  data() {
    return { name: 'world2' };
  }
}
</script>

<style lang="scss">
  $red: #e4393c;
  h1 { color: $red; }
</style>

Vue single‑file component documentation: https://cn.vuejs.org/ Built‑in Babel and Sass compilation allow ES6 and Sass syntax out of the box.

Including Components

1. Create a container

<div vm-container="bundle"></div>

The container must have a vm-container attribute; compiled scripts will be injected into a JavaScript file named after this attribute.

2. Insert Vue components

<div vm-container="bundle">
  <hello vm-type="component"></hello>
  <hello2 vm-type="component"></hello2>
</div>

Component tags use the file name as the tag name and require vm-type="component".

3. Specify component source directory

By default, KO loads modules from the project's mod folder. To load from another location, set the vm-source attribute.

<div vm-container="bundle">
  <common vm-type="component" vm-source="../../mod"></common>
</div>

4. Choose loading mode

<%= Sinclude("bundle", "inline") %>

inline

: JavaScript is inlined within the HTML. async: JavaScript loads asynchronously.

No argument: default external <script> tag.

Project Preview

ko3 serve helloworld   // opens http://localhost:9000

Project Deployment

# Compile the <em>helloworld</em> page
ko3 build helloworld

# Compile and automatically publish via SFTP (configured in ko.config.js)
ko3 build helloworld -d

Compiled assets are placed in the dist directory.