npm 包 wok 使用教程
介绍
wok 是一个基于 webpack 的静态网站构建工具，可以帮助前端开发者快速搭建静态网站，提供了丰富的插件和配置选项。
安装
wok 是一个 npm 包，可以通过 npm 安装：
--- ------- --- ----------
使用
配置
在项目根目录下创建 wok.config.js 文件，配置如下：
-------------- - -
------ -
-
--------- -------------
--------- --------------------
------ ---------------
------ ---- ------
--
--
--该配置文件定义了一个名为 index.html 的页面，在 public/index.html 模板文件基础上，使用 src/index.js 入口文件构建，页面标题为 Wok Site。
开发模式
在 package.json 中添加如下命令：
-
---------- -
-------- ---- ----
-
-然后在终端中运行：
--- -----
即可开启开发模式，此时 wok 会启动一个本地服务器，监听文件变化，实现热更新。
构建
在 package.json 中添加如下命令：
-
---------- -
-------- ---- ------
-
-然后在终端中运行：
--- --- -----
即可进行项目构建，wok 会将源文件编译打包成静态 HTML、CSS 和 JS 文件，并在 dist 目录下生成最终的构建结果。
插件
wok 提供了丰富的插件，可以扩展其功能：
@wok/manifest-plugin
----- -------------- - -------------------------------- -------------- - - -------- ---- ------------------ --
该插件会在构建过程中生成一个名为manifest.json 的文件，用于记录编译后文件的对应关系。
@wok/css-plugin
----- --------- - --------------------------- -------------- - - -------- ---- ----------- --------- --------------------------------- ---- --
该插件会将 CSS 文件单独打包，并生成一个名为 styles/[name].[contenthash].css 的文件。
示例代码
这是一个基于 wok 构建的静态网站，用于展示简历：
-- -------------
-------------- - -
------ -
-
--------- -------------
--------- --------------------
------ ---------------
------ ------- - ---- -----
--
--
-------- ---- ----------------- --- ----------- --------- --------------------------------- ----
--
-- ------------
------ --------------
------------------- -------
-- -----------------
--------- -----
----- ----------
------
----- --------------- --
---------- ------------------------------- ----------
----- ---------------- --------- --------------------------- --- --
-------
------
-------- --------
------ -------------
-------
-------
-- -------------
-- -
---------- -----
-
- -
---------- -----
-通过 wok 提供的插件，可以将 CSS 文件单独打包，并生成一个名为 styles/[name].[contenthash].css 的文件，在模板页面中使用 webpackManifest['main.css'] 进行动态引入，实现了静态网站的构建。
总结
wok 是一个非常优秀的静态网站构建工具，具有良好的灵活性和可扩展性。通过良好的配置和插件使用，可以轻松构建出优秀的静态网站。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671118dd3466f61ffe3e3