介绍
@sugarcoated/fondant-targets 是一个可以轻松创建多个 Webpack 构建目标的 npm 包。通过使用此包,你可以轻松地配置和管理多个构建目标,如不同的环境(dev、prod)、不同的平台(web、node)或不同的浏览器或设备。
这个包的目标是让你更快、更轻松地维护 Webpack 配置,同时不会影响到其它构建目标的影响。
安装
安装这个包很简单,在命令行里执行以下语句即可:
--- ------- ---------------------------- --
快速开始
- 安装 @sugarcoated/fondant-targets
- 在你的 Webpack 配置文件中引用该包,并传入配置对象。
----- -------------- - ---------------------------------------- -------------- - ---------------- -------- - - ----- ---------- -------------- --------------------------------------- ---- ------------- -- - ----- ----------- -------------- ---------------------------------------- ---- ------------ -- - ----- ----------- -------------- ---------------------------------------- ---- ------------- -- - ----- ------------ -------------- ----------------------------------------- ---- ------------ - - --
- 运行构建目标。
--- ------- --------------------
配置
这个包允许你配置多个目标,每一个目标都有一个名字和对应的 Webpack 配置。以下是一个目标的基本配置:
- ----- ---------- -------------- --------------------------------------- ---- ------------- -
目标名称
目标名称是一个字符串,用于标识一个特定的构建目标。名称必须是唯一的。
- ----- ---------- --- -
目标配置
目标配置是一个 Webpack 配置对象,它定义了此目标的所有配置。这可以是 Webpack 配置函数或配置对象,任何给定的 Webpack 配置选项都可以在这里使用。
- ----- ---------- -------------- --------------------------------------- --- -
运行环境
每个目标都有对应的环境,用于对 Webpack 配置进行一些自定义的更改。 每个目标配置可以有一个 env
属性,其值可以是任何字符串。
- ----- ---------- -------------- --------------------------------------- ---- ------------- -
高级配置
除了上述的配置项,这个库还支持以下高级配置项:
onTargetBeforeCompile
: 在编译开始之前的钩子函数onTargetAfterCompile
: 在编译完成后的钩子函数onTargetBeforeRun
: 在构建开始之前的钩子函数onTargetAfterRun
: 在构建完成后的钩子函数
运行构建目标
你可以在命令行中使用 --env.target=
参数来指定要运行的构建目标。例如:
--- ------- --------------------
示例
以下是一些示例,可以帮助你更好的理解如何配置和使用 @sugarcoated/fondant-targets。
配置 Babel 和 TypeScript
----- -------------- - ---------------------------------------- ----- ------------ - - ------ ----------------- ------- - ----- --------- --------- ----------- -- ------- - ------ - - ----- -------- -------- --------------- ---- ----------------- -- - ----- ---------- -------- --------------- ---- -------------- -- -- -- -- -------------- - ---------------- -------- - - ----- ---------- -------------- - ---------------- ----- ------------- -- ---- ------------- -- - ----- ----------- -------------- - ---------------- ----- ------------ -- ---- ------------ -- - --
处理多个 Webpack 配置
----- -------------- - ---------------------------------------- -------------- - ---------------- -------- - - ----- ---------- -------------- --------------------------------------- ---- ------------- -- - ----- ----------- -------------- ---------------------------------------- ---- ------------ -- - ----- ----------- -------------- ---------------------------------------- ---- ------------- -- - ----- ------------ -------------- ----------------------------------------- ---- ------------ - - --
以上就是使用 @sugarcoated/fondant-targets 的详细教程。希望这篇文章能够帮助你更好地管理和维护 Webpack 配置。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600562e481e8991b448e0774