安装

用 npm / yarn 安装:

$ npm install -D packx

$ yarn add -D packx

特性

  1. 基于 webpack5
  2. 支持 less,sass
  3. 支持 spa/mpa
  4. 支持 typescript
  5. 支持自定义html模板和自动生成 html入口
  6. 支持 react hmr
  7. 支持扩展 postcss, 比如 px2rem, px2viewport
  8. 支持自定义配置packx.config.js，覆盖默认webpack配置 (基于 webpack merge 算法)
  9. 支持 node api 调用和命令行调用
  10. 支持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,

  },

}, () => {

    // 构建结束处理

  });

项目结构和打包输出如下图

ssr

ssr和上述使用参考packx-demo库

项目代码参考 https://github.com/leonwgc/packx-demo

基于webpack5封装的cli工具packx的更多相关文章

  1. 基于JavaScript封装的Ajax工具类

    前段是件由于工作需要无奈编写了一个给予JavaScript封装的工具类,技术有限,误喷,感谢大家的支持. 1.以下是JavaScript 的 Ajax 工具类. function createXMLH ...

  2. 微信 CLI 工具正式发布 v1.0

    前言 为了让开发者可以更加方便舒适地获取到微信开发的资源,今天我们基于 Senparc.Weixin SDK 正式发布了基于 .NET 的微信 CLI 工具:Weixin.CLI(v1.0). 通过 ...

  3. 如何用node开发自己的cli工具

    如何用node开发自己的cli工具 灵感 写这个工具的灵感以及场景源于youtube的一次闲聊 github 地址 blog首发 使用场景 原本我们写博客展示shell,例如:安装运转docker,一 ...

  4. Hive -- 基于Hadoop的数据仓库分析工具

    Hive是一个基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,通过类SQL语句快速实现简单的MapReduce统计,不必开发专门的MapReduce应用,十分适合数据仓库 ...

  5. 基于JavaMail开发邮件发送器工具类

    基于JavaMail开发邮件发送器工具类 在开发当中肯定会碰到利用Java调用邮件服务器的服务发送邮件的情况,比如账号激活.找回密码等功能.本人之前也碰到多次这样需求,为此特意将功能封装成一个简单易用 ...

  6. 基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件

    目录 1. 前言 2. 关于vue-simple-uploader 3. 基于vue-simple-uploader封装全局上传组件 4. 文件上传流程概览 5. 文件分片 6. MD5的计算过程 7 ...

  7. EasyRTSPClient：基于live555封装的支持重连的RTSP客户端RTSPClient

    今天先简单介绍一下EasyRTSPClient,后面的文章我们再仔细介绍EasyRTSPClient内部的设计过程: EasyRTSPClient:https://github.com/EasyDar ...

  8. 大数据之路week07--day05 （一个基于Hadoop的数据仓库建模工具之一 HIve）

    什么是Hive? 我来一个短而精悍的总结(面试常问) 1:hive是基于hadoop的数据仓库建模工具之一(后面还有TEZ,Spark). 2:hive可以使用类sql方言,对存储在hdfs上的数据进 ...

  9. dotnet CLI工具是如何运行你的代码的

    原文连接:https://mattwarren.org/2016/07/04/How-the-dotnet-CLI-tooling-runs-your-code/作者 Matt Warren.授权翻译 ...

随机推荐

  1. tp5.1中返回当天、昨天、当月等的开始和结束时间戳

    /** * 返回今日开始和结束的时间戳 * * @return array */function today(){ list($y, $m, $d) = explode('-', date('Y-m- ...

  2. liunx服务器安装jdk

    1.官网下载需要版本的jdk,官网地址 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.h ...

  3. Linux 内核调度器源码分析 - 初始化

    导语 上篇系列文 混部之殇-论云原生资源隔离技术之CPU隔离(一) 介绍了云原生混部场景中CPU资源隔离核心技术:内核调度器,本系列文章<Linux内核调度器源码分析>将从源码的角度剖析内 ...

  4. SpringBoot简单尝试

    一.spring boot核心 配置在类路径下autoconfigure下(多瞅瞅) @SpringBootApplication里的重要注解(@Configuration,@EnableAutoCo ...

  5. 【近取 Key】Alpha - 项目展示

    项目与团队亮点 一.团队成员与分工简介 成员组成与分工 本团队由 6 名成员组成,其中有 3 名 PM,2 名后端开发人员与 4 名前端开发人员,由于组内成员数量有限,因此所有 PM 均需同时兼领开发 ...

  6. KMP算法以及优化(代码分析以及求解next数组和nextval数组)

    KMP算法以及优化(代码分析以及求解next数组和nextval数组) 来了,数据结构及算法的内容来了,这才是我们的专攻,前面写的都是开胃小菜,本篇文章,侧重考研408方向,所以保证了你只要看懂了,题 ...

  7. 【海通国际】Joe Lowry（Mr. Lithium）谈全球电池原材料供应危机

    [海通国际]Joe Lowry(Mr. Lithium)谈全球电池原材料供应危机 环球锂业公司(Global Lithium)总裁Joe Lowry日前接受了欧洲锰业Euro Manganese的邀请 ...

  8. at在指定的时间执行命令+atq列出用户待处理作业（jobs）

    按下crtl+d取消定时任务 # at now+1hourat> echo"a">aat> <EOF>at> <EOT>job 4 ...

  9. Docker创建镜像以及私有仓库

    Docker的安装及镜像.容器的基本操作详见博客https://blog.51cto.com/11134648/2160257下面介绍Docker创建镜像和创建私有仓库的方法,详细如下: 创建镜像 创 ...

  10. 安装T4环境

    Install-Package Microsoft.VisualStudio.TextTemplating.14.0 -Version 14.3.25407