安装

用 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. SpringBoot2.0之@Configuration注解

    SpringBoot2.0之@Configuration注解 本文转载自:https://www.javaman.cn/sb2/springboot-configuration 前面我们介绍了Spri ...

  2. thinkphp之独立日志（tp5.1）

    为了便于分析,File类型的日志还支持设置某些级别的日志信息单独文件记录,以error类型的日志为例,例如: 1.在log.php 中配置 'apart_level' => [ 'error' ...

  3. ppt技巧--字体变化

    常见字体搭配 Nordri Tools

  4. 【.NET 与树莓派】六轴飞控传感器（MPU 6050）

    所谓"飞控",其实是重力加速度计和陀螺仪的组合,因为多用于控制飞行器的平衡(无人机.遥控飞机).有同学会问,这货为什么会有六轴呢?咱们常见的不是X.Y.Z三轴吗?重力加速度有三轴, ...

  5. Unity动态构建mesh绘制多边形算法流程分析和实践

    前言 先说一下,写这篇博文的动机,原文的博主代码写的十分潇洒,以至于代码说明和注释都没有,最近恰逢看到,所以以此博文来分析其中的算法和流程 参考博文:https://blog.csdn.net/lin ...

  6. 理解微信小程序的双线程模型

    有过微信小程序开发经验的朋友应该都知道"双线程模型"这个概念,本文简单梳理一下双线程模型的一些科普知识,学识浅薄,若有错误欢迎指正. 我以前就职于「小程序·云开发」团队,在对外的一 ...

  7. [MySQL数据库之表的详细操作：存储引擎、表介绍、表字段之数据类型]

    [MySQL数据库之表的详细操作:存储引擎.表介绍.表字段之数据类型] 表的详细操作 存储引擎 mysql中建立的库======>文件夹 库中建立的表======>文件 用来存储数据的文件 ...

  8. Python运算符 - Python零基础入门教程

    目录 一.算术运算符 二.赋值运算符 三.比较运算符 四.运算符的优先等级 五.重点总结 六.猜你喜欢 零基础 Python 学习路线推荐 : Python 学习目录 >> Python ...

  9. 对于uos目前只能安装商店的感慨，强制安装除外

    对于uos目前只能安装商店的感慨,强制安装除外 jie1018 / 2020-5-16 21:35 浏览: 702 / 回复: 26     个人觉得,在软件不足的情况下,更应该是系统支持,而不是让用 ...

  10. 【Python成长之路】装逼的一行代码：快速共享文件

    [Python成长之路]装逼的一行代码:快速共享文件 2019-10-26 15:30:05 华为云 阅读数 335 文章标签: Python编程编程语言程序员Python开发 更多 分类专栏: 技术 ...