Nuclear Pumpkin Mayhem


    1.10.0 • Public • Published

    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': '',
        'changeOrigin': true,
        'secure': true,
        'pathRewrite': {
          '^/api': ''
        'logLevel': 'debug'
    API: http://localhost:8090/api/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




    npm i @manpacker/generator

    DownloadsWeekly Downloads






    Unpacked Size

    78 kB

    Total Files


    Last publish


    • winterfete