基于webpack5封装的cli工具packx

来源：cnblogs　　作者：记忆的森林　　时间：2021/6/21 10:06:37　　对本文有异议

安装

用 npm / yarn 安装:

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

特性

基于 webpack5
支持 less,sass
支持 spa/mpa
支持 typescript
支持自定义html模板和自动生成 html入口
支持 react hmr
支持扩展 postcss, 比如 px2rem, px2viewport
支持自定义配置packx.config.js，覆盖默认webpack配置 (基于 webpack merge 算法)
支持 node api 调用和命令行调用
支持ssr

用法

开发 packx start [-p port]
构建 packx build [-p publicPath]
自定义 packx run [--build],配置 packx.config.js
js api 调用
ssr

入口在 ./src 目录下,比如./src/index.jsx

--src
  - index.jsx;

运行 packx start

入口在 ./src/page/ 目录下,比如./src/page/index.tsx

--src 
  --page
     -index.tsx;

运行 packx start page

入口 html, 如果项目不包含 index.html ，默认会生成 index.html,可以自定义 html 结构

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,minimal-ui,viewport-fit=cover"
    />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <title></title>
  </head>
  <body style="font-size: 14px">
    <div id="root"></div>
  </body>
</html>

扩展 postcss 插件

项目根目录添加 postcss.config.js，以添加 px2viewport 为例

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 通过 packx.config.js 自定义配置

注意，除了 entry 限制为 object 外，配置项和 webpack 配置一致
下面通过自定义配置 packx.config.js 实现了 mpa 项目的打包

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

开发 packx run
构建 packx run --build

node 命令行用法

packx 默认导出了一个 nodeApi, 函数签名如下, Configuration 为 webpack 配置对象

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,
  },
}, () => {
    // 构建结束处理
  });