随着前端开发技术的不断发展，越来越多的前端工程师开始将自己的代码封装成 npm 包来加快开发速度和提高代码的复用性。其中一个非常实用的 npm 包是 rawb-frontend-server-base。
rawb-frontend-server-base 是一个基于 express 和 webpack 的前端开发服务器。它可以帮助我们快速搭建一个本地服务器，方便开发和调试。接下来，本文将详细介绍如何使用它，并给出一些代码示例。
安装 npm 包
在开始使用 rawb-frontend-server-base 之前，首先需要安装它。我们可以使用 npm 命令来安装：
npm install rawb-frontend-server-base
初始化配置文件
安装完成之后，我们需要初始化一个配置文件。在项目根目录下创建一个 .frontend-server.json 文件，并添加以下内容：
-- -------------------- ---- -------
-
------------------
--------- --
------------
-----------------------------
---
---------- ---
------- -----
----------------------- -----
-------------------- --------------------------
-.frontend-server.json 文件包含了一些配置项：
publicPath：前端资源的公共路径，这个路径将会被用于生成静态资源的绝对路径。如果你需要修改这个路径，请确保你的静态资源是相对于这个路径的。routes：该路径下的文件都将被返回特定的 HTML 模板，比如，我们可以指定所有的请求都使用./src/index.html这个模板，这样做可以很方便的解决 SPA 应用路由问题。proxies：代理列表，可以配置所有需要被代理的 API 列表，这将便于我们在开发模式下通过代理请求后端服务。port：前端服务的端口，这将控制你的前端服务能够被访问的地址。openBrowserOnStartup：是否在启动服务器之后自动打开默认浏览器，方便我们快速查看效果。webpackConfigPath：webpack 配置文件的路径。
配置 webpack
rawb-frontend-server-base 默认使用 ./webpack/webpack.dev.js 作为 webpack 配置文件。如果这个文件不存在，rawb-frontend-server-base 将创建出一个简单的 webpack 配置文件。但是，如果你需要配置更复杂的 webpack 配置，你可以在这个路径下自定义你的 webpack 配置。
以下是一个简单的 webpack 配置示例：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
----- --------------
------ -----------------
------- -
----- ----------------------- --------
--------- ------------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
--
--
-
----- ---------
---- ---------------- --------------
--
--
--
--运行服务器
配置完成之后，我们就可以启动服务器了。在控制台输入以下命令：
npm run start
现在，我们可以在浏览器中访问 http://localhost:3000 来查看我们的应用。
总结
这篇文章介绍了如何使用 rawb-frontend-server-base，从安装、初始化配置文件、配置 webpack 到运行服务器。相信掌握了这些知识，你可以更快更方便地开发自己的前端应用程序。希望这篇文章对你们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5851ab1864dac66ddf