简介
fe-dev-server 是一个基于 webpack-dev-server 的 npm 包，用于在本地搭建前端开发环境。它提供了自动化的配置和构建工具，使得前端开发者可以专注于业务逻辑而不是底层构建工具的配置。
安装
我们可以通过 npm 安装 fe-dev-server：
--- ------- ------------- ----------
使用
配置文件
在项目根目录下创建一个名为 fe-dev-server.config.js 的文件。该文件将存储你的构建配置。
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
-
-命令行
使用 npm script 启动 dev server：
---------- - -------- --------------- -
执行：
--- --- -----
配置说明
我们从配置文件的角度来看一下 fe-dev-server 的几个重要的配置项
entry
入口文件。可以是字符串，也可以是字符串组成的数组。
------ ---------------- -- ---- ------ ------------------ ---------------------------- -- ----
output
出口文件配置。其中 filename 字段是必须的。
------- - ----- ----------------------- -------- --------- ----------- -
resolve
用于配置可以被解析的文件后缀和模块路径。
-------- -
----------- ------- ------- ---------
------ -
---- ----------------------- ------ -- - ---- --- --
-
-devServer
用于配置 webpack-dev-server 的相关配置。
---------- - ------------ -------------------- -------- --------- ----- ----- ---- -
使用建议
在实际使用中，可以结合其它插件和工具，以更好的发挥 fe-dev-server 的作用。比如：
html-webpack-plugin
会自动生成 html 文件，并引入 bundle.js。
----- ----------------- - ------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
------ --- -----
--------- ---------------- -- ------
--
-
-mini-css-extract-plugin
用于将 css 文件从 bundle.js 中抽离出来，独立成单个文件。
----- -------------------- - ----------------------------------
-------------- - -
-- ---
-------- -
--- ----------------------
--------- ------------
--
--
------- -
------ -
-
----- ----------
---- ----------------------------- --------------
--
--
--
-babel
用于转译 ES6+ 的 JavaScript 代码，以兼容旧的浏览器。
-------------- - -
-- ---
------- -
------ -
-
----- -----------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
-总结
fe-dev-server 是一个非常方便的前端开发工具，它可以给我们省去很多底层的构建工具配置，让我们可以更加专注于业务逻辑的开发。建议结合其它插件和工具，以更好的发挥其作用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/71718