Webpack 构建 Hexo 主题 Yilia 的源码

相关站点

构建环境

  • npm 6.5.0
  • node 10.15.0
  • webpack 1.13.2
  • debian 9 (stretch)

目录结构

  • layout - 模板目录
  • languages - 语言配置目录
  • source-src - 源文件目录,编译到 source 目录
  • source - Hexo 加载主题资源的主目录,需要编译生成

一般来说,如果想修改页面的 html,可以到 layout 文件夹里直接修改。如果想修改 css、js,则需要到 source-src 文件夹里修改,并通过后面介绍的构建步骤,将源码编译到 source 目录下。

拉取 Yilia 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 进入Hexo的主题目录
# cd /blog-root/themes

# 克隆Yilia代码
# git clone https://github.com/litten/hexo-theme-yilia.git

# 进入Yilia的根目录
# cd hexo-theme-yilia

# 清理NPM模块的目录
# rm -rf node_modules

# 安装NPM模块
# npm install

执行构建操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
# 进入Yilia的根目录
# cd hexo-theme-yilia

# 清理编译目录(非必要),如果博客已上线一段时间,且考虑到旧用户浏览器的缓存问题,此时必须保留旧的编译文件,否则页面在旧用户的浏览器上可能会显示不正常
# rm -rf source/*

# 开发可以执行以下命令,此时会用webpack打包,并把文件编译到source目录下,但编译后的文件不会经过压缩处理
# 由于webpack打包完成后,不会自动退出,当看到以下日志信息,则代表编译成功,可以使用快捷键 Crtl + C 强制退出
# npm run dev

> yilia@4.0.0 dev /usr/local/hexo-develop/themes/hexo-theme-yilia
> webpack

Hash: 05a7eebef4ac3b6cddcb
Version: webpack 1.15.0
Time: 16582ms
Asset Size Chunks Chunk Names
img/scrollbar_arrow.png 3.06 kB [emitted]
img/default-skin.png 547 bytes [emitted]
img/preloader.gif 866 bytes [emitted]
fonts/iconfont.b322fa.eot 20 kB [emitted]
fonts/iconfont.8c627f.woff 13.2 kB [emitted]
fonts/iconfont.16acc2.ttf 19.7 kB [emitted]
fonts/iconfont.45d7ee.svg 27.5 kB [emitted]
fonts/default-skin.b257fa.svg 1.55 kB [emitted]
fonts/tooltip.4004ff.svg 492 bytes [emitted]
main.be3dc1.js 179 kB 0 [emitted] main
mobile.3bc8c9.js 337 kB 1 [emitted] mobile
slider.0bdfac.js 177 kB 2 [emitted] slider
main.be3dc1.css 73.7 kB 0 [emitted] main
../layout/_partial/script.ejs 115 kB [emitted]
../layout/_partial/css.ejs 80 bytes [emitted]
[0] multi mobile 40 bytes {1} [built]
+ 441 hidden modules
Child html-webpack-plugin for "../layout/_partial/script.ejs":
+ 3 hidden modules
Child html-webpack-plugin for "../layout/_partial/css.ejs":
+ 3 hidden modules
Child extract-text-webpack-plugin:
+ 2 hidden modules
Child extract-text-webpack-plugin:
+ 5 hidden modules
Child extract-text-webpack-plugin:
+ 8 hidden modules

# 发布最终版本可以执行以下命令,此时编译后会经过压缩处理
# npm run dist

# 查看编译后的文件列表
# tree source
source
├── fonts
│   ├── default-skin.b257fa.svg
│   ├── iconfont.16acc2.ttf
│   ├── iconfont.45d7ee.svg
│   ├── iconfont.8c627f.woff
│   ├── iconfont.b322fa.eot
│   └── tooltip.4004ff.svg
├── img
│   ├── default-skin.png
│   ├── preloader.gif
│   └── scrollbar_arrow.png
├── main.45052c.css
├── main.45052c.js
├── mobile.4c76cb.js
└── slider.daf231.js

通过 Hexo 测试构建结果

1
2
3
4
5
6
7
8
9
10
11
12
13
# 进入博客的根目录
# cd /blogroot

# 通过Hexo清理Public目录
# hexo clean

# 通过Hexo构建静态文件
# hexo generate

# 通过Hexo启动服务
# hexo server

# 浏览器打开博客页面,查看构建结果是否生效