fis3-packager-deps-pack

Pack resource include dependencies.

fis3-packager-deps-pack

支持包含依赖的打包方式。

fis.match('::packager', {
  packager: fis.plugin('deps-pack', {

    'pkg/hello.js': [

      // 将 main.js 加入队列
      '/static/hello/src/main.js',

      // main.js 的所有同步依赖加入队列
      '/static/hello/src/main.js:deps',

      // 将 main.js 所以异步依赖加入队列
      '/static/hello/src/main.js:asyncs',

      // 移除 comp.js 所有同步依赖
      '!/static/hello/src/comp.js:deps'
    ],

    // 也可以从将 js 依赖中 css 命中。
    'pkg/hello.css': [
      // main.js 的所有同步依赖加入队列
      '/static/hello/src/main.js:deps',
    ]

  })
});
  • 原来的 packTo将被忽视,在此插件配置项中设置。
  • 每个规则都会按顺序将命中的文件加入到列表或者从列表中移除,顺序不同会带来不一样的结果。
  • :deps用来命中目标文件的依赖文件,不包含自己。
  • :asyncs用来命中目标文件的异步依赖,不包含自己。
  • !xxx叹号打头的规则,会把命中的文件,从现有的列表中去除。

注意

同一个文件不能够打包到同一包里面,所以如果发现某个文件没有按预期打包目标文件里面,你需要分析是不是打包其他包里面了。 策略为谁先命中先生效。

安装

npm install -g fis3-packager-deps-pack

配置项

  1. useTrack默认 true。 是否将合并前的文件路径写入注释中,方便定位代码。
  2. useSourceMap默认为 false。是否开启 souremap 功能。

关闭输出路径信息

默认打包后输出路径信息,便于调试.形式如下

/*!/components/underscore/underscore.js*/

可以在插件的配置中关闭路径信息输出

fis.match('::package', {
  packager: fis.plugin('deps-pack', {
    useTrack : false, // 是否输出路径信息,默认为 true
    'pkg/all.js': [
       '/modules/index.jsx',
       '/modules/index.jsx:deps'
    ]
  })
})

开启 SourceMap 功能

fis.match('::package', {
  packager: fis.plugin('deps-pack', {
    useSourceMap : true, // 合并后开启 SourceMap 功能。
    'pkg/all.js': [
       '/modules/index.jsx',
       '/modules/index.jsx:deps'
    ]
  })
})

HomePage

https://github.com/fex-team/fis3-packager-deps-pack

Repository

https://github.com/fex-team/fis3-packager-deps-pack.git


上一篇:fis3-command-install
下一篇:fis3-hook-relative

相关推荐

  • 🚀webpack 4 beta — try it today!🚀

    Now that webpack is a 0CJS (Zero Configuration) outofthebox bundler, we will lay groundwork in 4.x a...

    2 年前
  • 🔥一步一步的带你走进Webpack4的世界

    前言 webpack是当下最热门的前端资源模块化管理和打包工具,它可以将许多松散的模块按照依赖和规则打包成符号生产环境部署的前端资源,还可以将按需加载的模块进行代码分割。

    3 个月前
  • (独家!)webpack 5 changelog 全文翻译

    ★ webpack 团队于北京时间 10 月 12 日凌晨发布了 版本,本文译自 。此部分主要面向非插件开发的 webpack 使用者。 ” 简要说明 此版本重点关注以下内容: ...

    8 个月前
  • 面试必备!webpack 中那些最易混淆的 5 个知识点

    前两天为了优化公司的代码打包项目,恶补了很多 webpack4 的知识。要是放在几年前让我学习 webpack 我肯定是拒绝的,之前看过 webpack 的旧文档,比我们内部项目的文档还要简陋。

    1 年前
  • 面试官:请手写一个webpack4.0配置

    确认过眼神,你还是没有准备秋招的人?时间仓促。自京东6月8号开启管培生的招聘,就意味着秋招的开始。然而你还在等着秋天的到来?今年形势应该更为严峻,随着各大技术(vue,webpack,react,微信...

    2 年前
  • 随记-package

    详情参考npmpackage.json 👈🏻 package.json 一、介绍 存在于根目录下 定义当前项目所需模块及项目配置信息 npm install 依赖当前文件 二、字段及含义 ...

    2 个月前
  • 随着WebPACK定义全局变量

    随着WebPACK定义全局变量...

    2 年前
  • 重新认识 package.json

    前言 🤔 在每个项目的根目录下面,一般都会有一个 package.json 文件,其定义了运行项目所需要的各种依赖和项目的配置信息(如名称、版本、许可证等元数据)。

    2 天前
  • 重新认识 package.json

    前言 🤔 在每个项目的根目录下面,一般都会有一个 package.json 文件,其定义了运行项目所需要的各种依赖和项目的配置信息(如名称、版本、许可证等元数据)。

    18 天前
  • 配置webpack中externals来减少打包后vendor.js的体积

    在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差。为此我们需要减少vendor.js的体积,从本...

    2 年前

官方社区

扫码加入 JavaScript 社区