安装

用 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. Python内置函数(Built-in Function)

    直接查看编码以及示例: 1 """ 2 内置函数 Built-in Function 3 """ 4 5 # abs() 取绝对值 6 pr ...

  2. Jenkins + Docker + ASP.NET Core自动化部署

    本来没想着要写这篇博客,但是在实操过程中,一个是被网络问题搞炸了心态(真心感觉网络能把人搞疯,别人下个包.下个镜像几秒钟搞定,我看着我的几KB小水管真是有苦说不出),另一个就是这里面坑还是有一些的,写 ...

  3. 巧用SQL拼接语句

    前言: 在日常数据库运维过程中,可能经常会用到各种拼接语句,巧用拼接SQL可以让我们的工作方便很多,达到事半功倍的效果.本篇文章将会分享几个日常会用到的SQL拼接案例,类似的SQL还可以举一反三,探索 ...

  4. 【BUAA软工】结对编程作业

    项目 内容 课程:2020春季软件工程课程博客作业(罗杰,任健) 博客园班级链接 作业:BUAA软件工程结对编程项目作业 作业要求 课程目标 学习大规模软件开发的技巧与方法,锻炼开发能力 作业目标 完 ...

  5. 消息队列RabbitMQ（二）：RabbitMQ的系统架构概述

    前言 RabbitMQ是基于AMQP协议的,要想深入理解RabbitMQ,就必须先了解AMQP是个什么东东? AMQP协议 AMQP即Advanced Message Queuing Protocol ...

  6. Python编写abaqus后处理脚本（学习笔记）

    本节内容参考自书籍<Python语言在Abaqus中的应用>,注意:以下代码为伪代码,仅供参考 1.导入必要的模块,加载后处理odb文件 from abaqus import * from ...

  7. SpringBoot中获取上下文

    在实际开发中,有时候会根据某个bean的名称或class到Spring容器中获取对应的Bean.这里只做个简单的记录,方便后续自查. @Component public class SpringCon ...

  8. [DB] MySQL 索引分类

    按数据结构 B树索引 数据位于叶子节点,到任何一个叶子节点的距离相同,一般不超过3-4层 B+树索引:每个叶子节点除了数据还存放前后叶子节点的指针,方便快速检索,是InnoDB采用的索引结构 Hash ...

  9. Mysql 官网下载二进制包_图解步骤

    MYSQL下载方式 下载二进制包,直接使用wget下载 [root@db ~]# wget https://downloads.mysql.com/archives/get/p/23/file/mys ...

  10. 010.Python字符串的格式化

    字符串的格式化 顺序传参 索引传参 关键字传参 容器类型传参(列表和元组) {}相当于占位符 1 顺序传参 strvar = "他{}牺牲自己,{}出卖组织" res = strv ...