前言
在开发前端应用过程中，使用 Webpack 已经成为了不可替代的构建工具。纵观 Webpack 的社区，有很多与 Webpack 相关的 npm 包都得到了广泛的应用。其中，@webpack-contrib/defaults 是一个非常实用的库，它能够帮助我们更快捷地配置 Webpack。
安装和使用
使用 npm 安装 @webpack-contrib/defaults:
npm i -D @webpack-contrib/defaults
安装完成后，在配置 Webpack 的时候，只需要引入该库即可：
const defaults = require('@webpack-contrib/defaults');
module.exports = defaults({
// Webpack 配置对象
});配置对象
defaults 函数接收一个 Webpack 配置对象，包含以下字段：
entry: 入口文件output: 输出目录mode: 模式，支持 development, production 和 nonedevtool: 生成 source map 的类型module: 模块配置resolve: 解析模块路径的配置plugins: Webpack 插件
示例代码：
-- -------------------- ---- -------
----- -------- - -------------------------------------
-------------- - ----------
------ -----------------
------- -
----- -------------------- --------
--------- -----------
--
----- -------------
-------- -------------
------- -
------ --
----- --------
-------- ---------------
---- --------------
--
--
-------- -
----------- -------
--
-------- -
--- -------------------
--------- ------------
--
-
---主要特性
@webpack-contrib/defaults 的主要特性如下：
自动生成模板文件
当我们在配置 Webpack 时，需要手动添加一个 HTML 文件，并在该文件中引入生成的 JavaScript 文件。而使用 @webpack-contrib/defaults 能够帮助我们自动创建一个 HTML 文件，并将生成的 JavaScript 文件引入到该文件中去。示例代码如下：
-- -------------------- ---- -------
----- -------- - -------------------------------------
-------------- - ----------
------ -----------------
------- -
----- -------------------- --------
--------- -----------
--
--------- -----------------
--在上述代码中，我们只需将 template 字段指向正确的 HTML 模板文件即可，无需再手动创建。
自动注入插件
除了自动生成 HTML 文件之外，@webpack-contrib/defaults 还会自动注入一些常用的插件，如读取环境变量、处理 CSS 文件等。
支持 TypeScript
通过添加 typeScript 属性，我们能够快速地配置 TypeScript。
-- -------------------- ---- -------
----- -------- - -------------------------------------
-------------- - ----------
------ -----------------
------- -
----- -------------------- --------
--------- -----------
--
----------- ----
---国际化支持
我们可以通过添加 i18n 属性来支持国际化。
-- -------------------- ---- -------
----- -------- - -------------------------------------
-------------- - ----------
------ -----------------
------- -
----- -------------------- --------
--------- -----------
--
----- -
-------- ------ ------
-------------- -----
--------- -
--- -
------ --------
--
--- -
------ -----
-
-
-
--在上述代码中，我们定义了两种语言：英语和中文，同时指定中文为默认语言，并提供了翻译文本的键值对。
使用 Babel 和 PostCSS
我们可以借助 @webpack-contrib/defaults 让 Webpack 使用 Babel 和 PostCSS 进行转译和样式处理。
-- -------------------- ---- -------
----- -------- - -------------------------------------
-------------- - ----------
------ -----------------
------- -
----- -------------------- --------
--------- -----------
--
------ -
-------- ---------------------
--
-------- -
-------- -------------------------
-
---总结
@webpack-contrib/defaults 是一个非常实用的 Webpack 配置工具。通过使用该库，我们能够快速地配置 Webpack，实现自动生成 HTML 文件、自动注入插件、支持 TypeScript 等功能。希望大家能够在实际的开发工作中尝试使用该工具，提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbf9bb5cbfe1ea0611c3e