安装

用 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】Leetcode每日一题-打家劫舍2

    [python]Leetcode每日一题-打家劫舍2 [题目描述] 你是一个专业的小偷,计划偷窃沿街的房屋,每间房内都藏有一定的现金.这个地方所有的房屋都 围成一圈 ,这意味着第一个房屋和最后一个房屋 ...

  2. 【python】Leetcode每日一题-最长公共子序列

    [python]Leetcode每日一题-最长公共子序列 [题目描述] 给定两个字符串 text1 和 text2,返回这两个字符串的最长 公共子序列 的长度.如果不存在 公共子序列 ,返回 0 . ...

  3. 基于ray的分布式机器学习（一）

    基本思路:1.对数据分块,使用多个worker分别处理一个数据块,每个worker暴露两个接口,分别是损失计算的接口loss和梯度计算的接口grad:2.同时定义full_loss和full_grad ...

  4. windows下使用dos命令手工与ntp服务器同步系统时间

    管理员模式的命令窗口 net stop w32time &w32tm /unregister &w32tm /register &net start w32time & ...

  5. JavaSE全部学习笔记——集合

  6. 【技术博客】忘记密码界面的Vue前端实现

    一.基本流程 [登录界面] --> [点击忘记密码] --> [输入个人邮箱和验证码] --> [系统发送邮箱验证] --> [用户在限定时间内登录邮箱,查收验证码] --&g ...

  7. Promise解析（待完成）

    Promise是一种异步操作的解决方案,将写法复杂的传统的回调函数和监听事件的异步操作,用同步代码的形式表达出来.避免了多级异步操作的回调函数嵌套. 1.主要用于异步计算 2.可以将异步操作队列化,按 ...

  8. Powershell阻止确认

    要阻止弹出确认提示,需要设置-Confirm为false, new-VM -Name $hostname -Template $template -VMHost 10.11.31.5 -OSCusto ...

  9. 所有的 Unix Like 系统都会内建 vi 文书编辑器。vim 是vi的升级版本，它不仅兼容vi的所有指令 ，而且还有一些新的特性在里面。

    所有的 Unix Like 系统都会内建 vi 文书编辑器.vim 是vi的升级版本,它不仅兼容vi的所有指令 ,而且还有一些新的特性在里面. https://blog.csdn.net/carolz ...

  10. RSA算法在Python Django中的简单应用

    说明 RSA算法是当今使用最广泛,安全度最高的加密算法. • RSA算法的安全性理论基础 [引]根据百科介绍,对极大整数做因数分解的难度决定了RSA算法的可靠性.换言之,对一极大整数做因数分解愈困难, ...