Skip to content
🥇 generator for multiple pages webpack application
JavaScript Vue HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.

English | 中文

multipages-generator NPM version


multipages-generator is a multiple pages application generator (or CLI) for mobile. It has the whole DevOps which includes development, build, publish and the deployment. It is One-stop solution for mobile H5.


Multipages-generator suite for multipages website whatever is mobile website or PC website, H5 in hybird app. For example: this, chiji game.


  1. One-stop mobile MPA solution with modern web technologys like Nodejs, webpack4, babel, Vue with server side rendering.
  2. Efficient commands like new, develop,build,upload,analysis,deploy.
  3. Best practices for architechure and organization.
  4. 🔥 (new) Support Vue SSR and no framework or any other framework you like.
  5. Support development,producton ENV.
  6. Support sass、less、postcss
  7. Hot code reload for CSS and JS
  8. Support upload to Ali OSS and Qiniu OSS
  9. Support mobile adaptation with taobao flexible layout solution,fit different screen size and DPI.
  10. Support pm2 deployment


Global install ⚙️

Envirment requirement

NodeJS: >= 6.11.0

OS: MacOS,windows,centos


npm install multipages-generator -g  //now the latest is 1.6.x

Create a project 📽

init a project

meet init

Choose a template:

  • No JavaScript framework (You can add your framework like jQuery,zepto,vue,react and so on.)
  • Vue width SSR (It's add SSR default for now)
? Select your JavaScript framework (Use arrow keys)
❯ No JavaScript framework 
  Vue width SSR 


When initialized, install the dependencis and start the demo

C:\xxx\workspace>meet init
? Project name: h5-project
  __  __           _      ____ _     ___
 |  \/  | ___  ___| |_   / ___| |   |_ _|
 | |\/| |/ _ \/ _ \ __| | |   | |    | |
 | |  | |  __/  __/ |_  | |___| |___ | |
 |_|  |_|\___|\___|\__|  \____|_____|___|

   [Success] Project h5-project init finished, be pleasure to use 😊!

   Install dependencies:
     cd h5-project && npm install

   Run the app:
     meet start demo
     pm2 start process.json


Use meet -help to show all the commands.

C:\xxx\workspace>meet -help

  Usage: meet [command]


    -v, --version                 output the version number
    -h, --help                    output usage information


    init                          initialize your project
    new [module]/[module]-[page]  generate_native a new module
    start [module]                start application in development mode
    build [module]                build a module using webpack
    upload                        upload dist files to CDN
    analyse                       analysis dist files size and percent
    git                           auto git commit and push

Create a new module

meet new [module]/[module]-[page]


Attention, create a new module use like this

meet new [module]

When you need to create a new page in the existed module, use this command:

meet new [module]-[page]

For a example, create a game H5(module)

meet new game  // create a game with default page index.html

Because it's so called multiple pages generator, so create another page use this:

meet new game-detail // create the game detail.html in the game module

And you got a list files like this:

 ├─images // this is no images, just a dictory
 | ├─index
 | | ├─business.js  // the business js(Expand as you wish)
 | | ├─service.js   // http service code
 | | └─util.js      // utils code
 | └─index.js       // the main js file
 | └─index.css      // css code
   └─index.html     // html code

Develop a module

meet start [module]

meet start demo

It started with this followed, you can choose a link to open in browser.

 √ Build done

[Tips] visit: http://localhost:8080/demo/

Attention: Vue CSR: http://localhost:8080/demo/?csr=true Vue SSR: http://localhost:8080/demo/

Hot reload

JS、CSS support hot code reload,HTML changes need man to refresh the browser.


Html generated contain two marker, you don't need to worry about this. It's for better development and will removed when in build.

<!DOCTYPE html>
<html lang="zh-CN">
  <% include ../head.html %>
  <!--@hot-reload, will auto remove after compiled-->
  <link rel="stylesheet" data-hr="hot-reload" href="/demo/styles/index.css">
  <div>you content...</div>
  <!--@hot-reload, will auto remove after compiled-->
  <script type="text/javascript" data-hr="hot-reload" src="/common/js/hot-reload.js"></script>

Build a module

meet build [demo]

meet build demo
C:xxx\workspace\h5>meet build demo

> mg-template@1.0.0 build C:\meetyou\workspace\test\mg-workspace\h5
> cross-env NODE_ENV=production node build/commands/build.js "demo"

Delete dist directory!
  ⣾ Building...
  ⣽ lasted 1 seconds. HTML去除开发环境hotReload代码: ..\server\views\prod\demo\index.html
Hash: 2a217fb45f03fb354254
Version: webpack 4.17.2
Time: 1687ms
Built at: 2018-09-06 19:50:40
                               Asset      Size  Chunks             Chunk Names
                  index.12969e6e.css  4.71 KiB       0  [emitted]  index
                   index.080a1e3d.js  1.01 KiB       0  [emitted]  index
..\server\views\prod\demo\index.html  3.74 KiB          [emitted]
Entrypoint index = index.12969e6e.css index.080a1e3d.js

Upload dist files to Qiniu CDN:
Webpack Bundle Analyzer is started at
Use Ctrl+C to close it
[Success]: 上传文件至七牛云CDN成功!文件地址:
[Success]: 上传文件至七牛云CDN成功!文件地址:
[Success]: 上传完毕 😊!
Use Ctrl+C to close it

After analysis powerd by webpack plugin, the page will show the code proportion.


meet analyse

Use this command after builded.

meet analyse



meet upload

Upload the files which in the dist dictory to OSS server. Config the Ali OSS or Qiniu OSS configs in mg.config.js.

meet upload



mg.config.js is look like:

module.exports = {

    // the client server (use for hot reload ) port
    clientPort: '8080',

    // the server(for deployment) port
    server: {
        port: '8090',

    // upload config
    upload: {
        cdn: '//',
        projectPrefix: 'nodejs-common',

        // if use Ali OSS,set aliconfig a empty object, now it support Ali CLI for upload, 
        // aliconfig: {
        // },
        // Qiniu OSS
        qconfig: {
            ACCESS_KEY: 'ei1uOdGpVLliA7kb50sLcV9i4wfYLPwt5v0shU10',
            SECRET_KEY: '-pFFIY-ew35Exyfcd67Sbaw40k15ah3UfZTFWFKF',

        // is auto upload after build
        autoUpload: true


Ali OSS upload

Todo List

  1. Better Vue SSR solution
  2. Support react, react-ssr


deploy to server in 30 minutes


The MIT License

You can’t perform that action at this time.