Frontend generator build project
Last updated 2 months ago by winterfete .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @manpacker/generator 
SYNC missed versions from official npm registry.

npm npm bundle size npm NPM



Manpacker is a set of build engine based on webpack to build engine package.
Entry file supported file extension js or ts
Support for multi-portal file build, Files must be in the build root directory.


Project default initialization file, Can be a javascript script file, or a json configuration file.
Example: json

{"output": "view"}

You can also set the manpacker field in the package.json file.

{"manpacker": {"root": "src"}}

Final input result, Merge .manpackeric config item.

{"root": "src", "output": "view"}

You can customize the project initialization file name.
Custom name: development.ic.js

npx manpacker --ci development.ic.js
manpacker --ci development.ic.js


npm i @manpacker/generator -D



Start the local development environment.

manpacker server
manpacker server --ic [value] -c [config] --port [number]

Construction of production environment engineering project.

manpacker build
manpacker build --ic [value] -c [config]


const manpacker = require('@manpacker/generator')



Core compilation method

const { compile } = require('@manpacker/generator')
compile({ env, ic, config })
param type explain
env string env: NDOE_ENV variabl
ic object .manpackeric config item object
config function manpacker.webpack.js return funtion


Commander is Create command-line class.

const { Commander } = require('@manpacker/generator')

let { version } = require('./package.json')
let commander = new Commander({ version })

Explain commander methods

method explain
build Default build production environment, enter project directory
server Launch Development Environment, Local Interconnect Service, default Port 8090
parse Compile registration command Lint


Create css loader generator.

const { createCssLoader } = require('@manpacker/generator')
param type explain
ic object code>.manpackeric config item object
...loader [object,string] style loader


createCssLoader(ic, { loader: 'resolve-url-loader' }, { loader: 'sass-loader' })
createCssLoader(ic, 'resolve-url-loader', 'sass-loader')


Create URI file loader generator.

param teype explain
dir string create new dir for URI file.


Create Eslint loader generator.

param teype explain
rgx RegExp Create eslint loader.


Default root file name: .manpackeric
Configuration item description:

name type value description
root string default: src Source directory for building the project
output string default: view Directory output after build
ext string default:htm Extension of the outputted page
cdn string default: "/" Domain name for static Resource, "publicPath" attribute value
define object dedalut: {NODE_ENV: process.env.NODE_ENV} Define constants in a project, eslintrc set global key-value
pages object default: {} Multi-portal file page configuration Example
remUnit number default: 100 Conversion of px with 750px Design Diagram, Minimum cardinality.
isPx2rem boolean default:true Pixel unit px conversion rem
injectStyle array default:[] Global style files that need to be injected, Avoid repeating reference, Example
isCssExtract boolean default: fasle Extract css separate files
isMergeCommon boolean default:false When multiple portal files are used, the common code section is extracted
minChunks number default: 2 If isMergeCommon:true, Extracts the minimum entry file number of files for the public code.
isCssModule boolean default:false Whether styles are introduced as css templates, Example
isMiniHTML boolean default:true Compressed page.
template string default:'template.html' Build-time template file.
map string default: ' ' Source map file URI
isEslint boolean default: true Start the eslint-loader feature by default
isZip boolean default: false Compressed project are zip’s ext.
proxy object default: {} Resolve browser request interface joint cross-domain.


Ingress File header Settin. Example: Entry files index.js

{"page": {"index": "Test title"}}

More entry files index.tslist.ts, and so on.

{"pages": {"index": "Test title", "list": "List test title"}}


Inject global style file, Avoid manual introduction

{"injectStyle": ["./common/style/mixins.scss", "./common/style/varable.scss"]}
{"injectStyle": ["./common/style/index.scss"]}


Introduction of css style to work with Modular approach.

.frame {margin: auto;}


import Style from './index.scss'

<div class={Style.frame}></div>


  '/api': {
    'target': 'https://maindomain.com',
    'changeOrigin': true,
    'secure': true,
    'pathRewrite': {
      '^/api': ''
    'logLevel': 'debug'
API: http://localhost:8090/api/home => https://maindomain.com/home


Specific reference: postcss

This generator includes plugins: postcss-preset-env postcss-import postcss-url cssnano
Extend the postcss plug-in the root directory: create file postcss.config.js


Default root file name: manpacker.webpack.js

module.exports = ic => {
  // webpack config item.
  return {}

The parameter ic is the injected initialization parameter object.
Webpack configuration items can be set based on ic



Current Tags

  • 1.9.0                                ...           latest (2 months ago)

19 Versions

  • 1.9.0                                ...           2 months ago
  • 1.8.6                                ...           a year ago
  • 1.8.5                                ...           a year ago
  • 1.8.4                                ...           a year ago
  • 1.8.3                                ...           a year ago
  • 1.8.2                                ...           a year ago
  • 1.8.1                                ...           a year ago
  • 1.8.0                                ...           a year ago
  • 1.7.3                                ...           a year ago
  • 1.7.2                                ...           a year ago
  • 1.7.1                                ...           a year ago
  • 1.7.0                                ...           a year ago
  • 1.6.1                                ...           a year ago
  • 1.6.0                                ...           a year ago
  • 1.5.0                                ...           a year ago
  • 1.4.0                                ...           a year ago
  • 1.3.0                                ...           a year ago
  • 1.2.0                                ...           a year ago
  • 1.1.0                                ...           a year ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 10
Dependencies (31)
Dev Dependencies (5)

Copyright 2014 - 2016 © taobao.org |