简介
dora-cli 是一个基于 webpack 开发的前端工程化脚手架，它通过封装 webpack 配置，提供了一整套的优化方案，让我们能够便捷构建前端项目。
安装
使用 npm 全局安装 dora-cli：
npm i dora-cli -g
查看版本：
dora -v
快速开始
初始化
使用 dora-cli 快速初始化一个基于 React 的项目：
dora init my-app --dependency react
等待初始化完成后，进入项目目录：
cd my-app
运行项目
在项目目录下运行：
dora start
此时浏览器会自动打开地址 http://localhost:8000 ，并展示出 React 的欢迎界面。
构建项目
在项目目录下运行：
dora build
此时会在 dist 目录下生成构建后的文件。
功能展示
webpack 配置
dora-cli 封装了 webpack 的配置，通过配置文件 config/index.js 来进行配置。
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -
------ -----------------
--
------- -
----- ----------------------- -----------
--------- ------------
--
-------- -
----------- ------- --------
--
------- -
------ -
-
----- --------------
------- ---------------
-------- -
-------- --------------------- -----------------------
-------- ------------------------------------
--
--
-
----- ----------
---- ---------------- ------------- ---------------
--
--
--
---------- -
------------ ----------
----- -----
--
--webpack 插件
dora-cli 提供了一些常用的 webpack 插件，方便我们进行优化。
html-webpack-plugin
html-webpack-plugin 可以自动为我们生成 HTML 文件，并将打包后的 bundle 自动注入到 html 中。
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-- -------
-------- -
--- -------------------
--------- ----------------------- ------------------------
---
--
--clean-webpack-plugin
clean-webpack-plugin 可以在构建前清理 dist 目录下的旧文件，避免构建后的文件残留。
-- -------------------- ---- -------
----- - ------------------ - - --------------------------------
-------------- - -
-- -------
-------- -
--- ---------------------
-- -------
--
--配置文件合并
dora-cli 支持对配置进行合并扩展的功能，可以在项目根目录下的 dora.config.js 文件中，修改默认配置。
-- -------------------- ---- -------
-------------- - -
-------- -
-------- -
------ -
---- ----------------------- -------
--
--
--
--自定义命令
dora-cli 提供了 register 命令，可以让我们自定义命令，来执行一些特定的操作。
module.exports = function registerCommand({ program }) {
program
.command('test')
.description('test command')
.action(() => {
console.log('Hello dora-cli!');
});
};总结
通过学习 dora-cli，我们了解了一个基于 webpack 的前端工程化实现。dora-cli 提供了封装好的 webpack 配置，可以便捷构建前端项目；同时提供了一些常用的 webpack 插件和命令，方便我们进行优化和定制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005546681e8991b448d1aeb