Webpack 构建 Hexo 主题 Yilia 的源码

发表于 更新于 阅读次数： 评论数： 本文字数： 317 阅读时长 ≈ 1 分钟

相关站点

构建环境

  • 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模块（建议使用VPN）
# npm install --unsafe-perm=true --allow-root

执行构建操作

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

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