A cli tool packx based on webpack5 encapsulation

install

usenpm / yarnInstallation:

$ npm install -D packx
$ yarn add -D packx

characteristic

1. Based on webpack5
2. Support less, sass
3. Support spa/mpa
4. Typescript support
5. Supports custom HTML templates and automatic HTML entry generation
6. Support react HMR
7. Supports extension of postcss, such as px2rem and px2viewport
8. Support custom configuration packx config. JS, overwriting the default webpack configuration (based on the webpack merge algorithm)
9. Supports node API calls and command line calls
10. Support SSR

usage

• Develop packx start [-p port]
• Build packx build [-p publicpath]
• Customize packx run [–build] and configure packx config. js
• JS API call
• ssr

The entrance is at/ SRC directory, for example/ src/index. jsx

--src
  - index.jsx;

Run packx start

The entrance is at/ Src/page/ directory, for example/ src/page/index. tsx

--src 
  --page
     -index.tsx;

Run packx start page

Entry HTML, if the project does not contain index HTML. By default, index HTML, you can customize the HTML structure

Extend the postcss plug-in

Add postcss config. JS, taking adding px2viewport as an example

module.exports = (ctx) => {
  if (!/node_modules/.test(ctx.file)) {
    ctx.options.plugins.push([
      require('postcss-px-to-viewport'),
      {
        unitToConvert: 'px',
        viewportWidth: 375,
        unitPrecision: 5,
        propList: ['*'],
        viewportUnit: 'vw',
        fontViewportUnit: 'vw',
        selectorBlackList: ['ignore'],
        minPixelValue: 1,
        mediaQuery: false,
        replace: true,
        exclude: [/node_modules/],
        include: undefined,
        landscape: false,
        landscapeUnit: 'vw',
      },
    ]);
  }
};

Packx run through packx config. JS custom configuration

Note that except that the entry is limited to object, the configuration items are consistent with the webpack configuration
Next, configure packx config. JS implements the packaging of MPA project

const path = require('path');

module.exports = {
  entry: {
    h5: './src/h5/index',
    pc: './src/pc/index',
  },
  output: {
    path: path.resolve(__dirname, './dist/packx-demo'),
    publicPath: '',
  },
};

• Develop packx run
• Build packx run –build

Node command line usage

Packx exports a nodeapi by default. The function signature is as follows. Configuration is the webpack configuration object

export default function nodeApi(isDev: boolean, config: Configuration, callback?: () => void): void;

const { default: pack } = require('packx');
...

pack(isDev, {
  entry: {
    index: `./src/index`,
  },
  devServer: {
    port: 3000
  },
  output: {
    path: getDist('dist'),
    publicPath,
  },
}, () => {
    //Build end processing
  });

The project structure and packaging output are shown in the following figure

ssr

SSR and the above use reference packx demo Library

Project code referencehttps://github.com/leonwgc/packx-demo