安装

用 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. java8中的日期和时间API

    一.背景 jdk 1.8 之前, Java 时间使用java.util.Date 和 java.util.Calendar 类. Date today = new Date(); System.out ...

  2. Thyemleaf报错: Method call: Attempted to call method *** on null context object

    翻译:方法调用:尝试在null上下文对象上调用方法*** 解释:在Thyemleaf上下中不存在所要调用的对象,相当于Java代码中的NullPointerException 解决方案: 方案1. 需 ...

  3. PhpStorm个性化设置推荐

    预览 字体 字体使用jetbrains的mono,前往下载:如何安装,字体安装完成之后Restart,可在PhpStorm settings中搜索 font 进行启用 mono 字体 主题 主题推荐使 ...

  4. 如何使用mongo shell

    Cd到MongoDb安装目录到bin目录下,执行mongo命令即可,其他命令参考手册:https://www.runoob.com/mongodb/mongodb-create-collection. ...

  5. FHE-Toolkit 安装

    什么是FHE-Toolkit? FHE-Toolkit-linux是用于Linux的IBM全同态加密工具包, 该工具包是一个基于Linux的Docker容器,可演示对加密数据的计算而无需解密, 该工具 ...

  6. GPUImage移植总结

    项目github地址: aoce 我是去年年底才知道有GPUImage这个项目,以前也一直没有在移动平台开发过,但是我在win平台有编写一个类似的项目oeip(不要关注了,所有功能都移植或快移植到ao ...

  7. 2021年有哪些优秀的免费PSD样机素材下载的网站？

    2021年有哪些优秀的免费PSD样机素材下载的网站? 无论是ui设计师还是平面设计师,为避免无休止的加班,平时就需要寻找并收藏一些优秀的设计素材网站.好的素材可以帮助设计师设计作品起到事半功倍的效果, ...

  8. 从effective C++中窥探C++11特性

    这几天在看effective C++3rd,这本书算是比较经典的一本入门C++的书了.虽然年代比较久远书中讲的好多模式已经被的新特性取代了,但是从这些旧的模式中可以了解到一些C++新特性设计的初衷,也 ...

  9. 实战-加密grub防止黑客通过单用户系统破解root密码

    基于Centos8进行grub加密 加密grub 实战场景:给grub加密,不让别人通过grub进入单用户. 使用grub2-mkpasswd-pbkdf2创建密文 [root@localhost ~ ...

  10. Fedora镜像下载地址

    Fedora镜像下载地址 Fedora 7核心源码包在: http://archives.fedoraproject.org/pub/archive/fedora/linux/releases/7/F ...