install
$ npm install -D packx
$ yarn add -D packx
characteristic
- Based on webpack5
- Support less, sass
- Support spa/mpa
- Typescript support
- Supports custom HTML templates and automatic HTML entry generation
- Support react HMR
- Supports extension of postcss, such as px2rem and px2viewport
- Support custom configuration packx config. JS, overwriting the default webpack configuration (based on the webpack merge algorithm)
- Supports node API calls and command line calls
- 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