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