介绍
在前端开发中，我们通常需要将开发好的网站或应用打包成为静态文件进行部署，并且要保证部署后的文件能够在浏览器中正确地运行。build-static 是一款便捷的 npm 包，可以帮助我们实现这个功能，方便简单！
本篇文章将详细介绍 build-static 的使用方法，包括安装、配置和运行等步骤。同时，为了方便大家理解和实践，我们将使用一个项目作为示例，带大家一起完成从打包到部署的全过程。
安装
使用 npm 包管理工具可以轻松安装 build-static。在控制台（终端）中键入如下命令，即可将此包安装至项目中：
npm install build-static --save-dev
由于 build-static 是一个开发依赖项，我们将其安装为项目的开发依赖项。
使用
配置 build-static
安装成功后，我们需要先配置 build-static 的参数，才能开始打包。我们需要手动创建一个 build-static.config.js 配置文件，提供打包所需的一些信息，比如入口文件、输出目录、资源文件目录等等。一般情况下，build-static.config.js 配置文件应该在项目根目录下。
首先，我们来看一下最基本的配置文件：
module.exports = { entry: 'src/index.html', output: 'dist', publicPath: '' }
entry: 入口 HTML 文件路径output: 打包输出目录publicPath: 公共路径（CDN 路径或域名）。如果需要将静态资源放到 CDN 上，可以填写对应的路径或域名。
此处我们先以最简单的配置为例，完成 build-static 的初步打包操作。
运行打包命令
一旦我们成功配置了 build-static.config.js 配置文件，我们即可开始打包整个项目。在控制台（终端）中键入如下命令，即可开始打包并生成静态文件。
npm run buildnpm run build 命令会自动调用 build-static 并传递相应的配置参数，从而完成整个项目的打包操作。
验证打包结果
在项目成功打包之后，我们即可进入到打包的目录中查看静态文件。在本次示例中，我们已经将输出文件目录设置为 dist，那么在终端输入以下命令即可进入此目录。
cd dist进入到此目录后，我们可以看到 dist 目录中已经出现了一些文件和文件夹：
dist/ ├── assets/ ├── index.html ├── favicon.ico └── main.js
其中，index.html 为我们打包后的主页面，而 assets 文件夹中则包含了所有的静态资源文件（比如 JS、CSS、图片等）。
现在，我们打开 index.html 文件，即可在浏览器中查看项目的最终效果。
高级配置
当然，以上只是使用 build-static 的基础操作。如果需要更多高级功能，我们可以在配置文件中填写更多参数来定制打包行为。
文件名
可以通过配置 filename 字段来自动生成文件名，避免文件名冲突和重复，从而提高整个项目的可维护性。
module.exports = { entry: 'src/index.html', output: 'dist', filename: '[name].[hash:8].[ext]', publicPath: '' }
这里 filename 字段设置了一个通用的格式：[name].[hash:8].[ext]。其中：
[name]代表文件名（不包含扩展名）。[hash:8]表示生成文件名的 hash 值，保证文件名的唯一性。[ext]代表文件扩展名。
模块自动引入
为了方便我们在项目中自动引入各类文件，我们可以使用 includeModules 参数自动引入这些文件，从而避免手动引入过程中的繁琐和复杂。
-- -------------------- ---- ------- -------------- - - ------ ----------------- ------- ------- ----------- --- --------------- - --- - ------------------ -------- ----------- -- ---- - ------------ -------------------- - - -展开代码
对于以上的示例配置，我们可以在 template 中直接使用：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- ----------- -- --- ---- - -- --------------------------------------------- - -- ----- ---------------- -------------- -- - -- ------- ------ ---- ---------------- -- --- ---- - -- -------------------------------------------- - -- ------- ---------------------- -- - -- ------- -------展开代码
上面的示例代码中可以看到，我们无需再手动使用 <link> 或 <script> 标签引入 CSS 和 JS 文件，而是通过模板引擎动态输出所需的模块路径即可。
总结
本文对使用 build-static 打包前端静态页面的过程进行了详细介绍。我们从基础的安装和配置、以及如何运行打包命令、打包结果的查看入手，讲解了 build-static 的使用方法，并提供了实际项目中可能需要用到的高级参数配置，旨在帮助读者更好地使用这个便捷的打包工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8dccdc64669dde551d
