什么是 @easy-webpack/core
@easy-webpack/core 是一个为 webpack 打造的易于使用的工具集，它提供了许多常用的、能力强大的 webpack 插件，让使用 webpack 变得更加轻松。@easy-webpack/core 包含了许多常用的 webpack 插件，例如代码压缩、自动化添加浏览器前缀等等，不仅如此，它还支持使用 TypeScript 编写 webpack 配置。
安装
可以使用 npm 或者 yarn 来安装 @easy-webpack/core：
--- ------- ---------- ------------------ - -- ---- --- ----- ------------------
如何使用
使用 @easy-webpack/core 构建项目需要先创建一个 webpack 配置文件，这个文件可以是纯 JavaScript 或者 TypeScript，对于 TypeScript 配置文件，需要对 ts-node 进行全局安装：
--- ------- -- ------- - -- ---- ------ --- -------
然后在 webpack 配置文件中引入 @easy-webpack/core：
-- ----------------- ----- - ------------ - - ------------------------------ ----- ------ - --------------- -- ------- -- --- -------------- - -------
在 { /* Plugins */ } 处，我们需要传入需要使用的插件数组，例如：
----- ---- - ----------------
----- ----------------- - -------------------------------
----- - ------------ - - ------------------------------
----- ------ - --------------
-
-------- -
--- -------------------
--------- --------------------------------
---
--
--
---
-------------- - -------在这个例子中，我们使用了 HtmlWebpackPlugin 插件从模板中生成 HTML 文件。
配置文件的文件名
@easy-webpack/core 会从项目根目录寻找 webpack 的配置文件，默认情况下，它会寻找 webpack.config.js，如果我们需要使用其他配置文件名，可以通过 --config 参数指定配置文件路径，例如：
------- -------- ---------------
配置文件的创建
我们可以手动编写 webpack 配置文件，但是对于一些常用的场景，@easy-webpack/core 提供了预配置方案，可以通过 preset 参数来使用这些预置方案，例如：
----- - ------------ - - ------------------------------ ----- ------ - ---------------- - ------- ------------ --- -------------- - -------
在这个例子中，我们使用 typescript 预置方案来完成 TypeScript 项目的 webpack 构建。
也可以传入文件路径作为参数，这个文件会被当做预置方案来处理。
----- - ------------ - - ------------------------------ ----- ------ - ---------------- - ------- -------------------- --- -------------- - -------
插件的使用
插件是 @easy-webpack/core 的核心，可以在配置文件中传入插件列表，这些插件具体执行的任务可以参见它们各自的文档。
假设我们需要使用 file-loader 插件来处理资源文件，我们可以这样使用：
----- ---- - ----------------
----- - ------------ - - ------------------------------
----- ------ - --------------
-
------- -
------ -
-
----- -----------------------
---- -
------- --------------
-------- -
----- ---------------
----------- ----------------
--
--
--
--
--
--
---
-------------- - -------在这个例子中，我们将需要处理的资源文件都以 file-loader 作为 loader 使用，并将它们输出到 assets/images 目录。
总结
@easy-webpack/core 是一个极易上手，功能齐全的 webpack 插件集合，它可以极大地简化我们的 webpack 配置，节省我们的时间和精力。在使用过程中，我们需要仔细阅读插件的文档，并学会如何使用它们，这对我们的前端开发工作非常有帮助和指导意义。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/101434