@manpacker/generator v1.10.0

Explain

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.

.manpackeric

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. Example:

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

Final input result, Merge .manpackeric config item.

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

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

npx manpacker --ci development.ic.js

manpacker --ci development.ic.js

Install

npm i @manpacker/generator -D

Usage

CLI

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]

API

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

method

.compile

Core compilation method

const { compile } = require('@manpacker/generator')
compile({ env, ic, config })

.Commander

Commander is Create command-line class.

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

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

Explain commander methods

.createCssLoader

Create css loader generator.

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

Example:

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

createCssLoader(ic, 'resolve-url-loader', 'sass-loader')

.createURILoader

Create URI file loader generator.

.createEslintLoader

Create Eslint loader generator.

.manpackeric

Default root file name: .manpackeric Configuration item description:

.pages

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

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

More entry files index.ts、list.ts, and so on.

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

.injectStyle

Inject global style file, Avoid manual introduction Example:

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

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

.isCssModule

Introduction of css style to work with Modular approach. Example: index.scss

.frame {margin: auto;}

index.jsx

import Style from './index.scss'

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

.proxy

{
  '/api': {
    'target': 'https://maindomain.com',
    'changeOrigin': true,
    'secure': true,
    'pathRewrite': {
      '^/api': ''
    },
    'logLevel': 'debug'
  }
}

API: http://localhost:8090/api/home => https://maindomain.com/home

postcss.config.js

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

manpacker.webpack.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

link