zhcexo's blog

让HTML Webpack Plugin根据多entry把html文件生成到指定目录中

2018/06/16 Share

遇到的问题

项目里有需要处理一堆目录的 html 文件自动生成,并且生成到相应的目录中。与 html 文件相对应的样式 css 文件和脚本 js 文件,也要放到相应的目录中。例如:

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
目录结构如下:
- dist
- src
|- a
`- index.js
|- b
`- index.js
|- c
`- index.js
`- tpl
`- index.html

希望得到的结果是,a,b,c 三个目录中的 index.js 都是入口文件,以 tpl 中的 index.html 为模板,
经由 webpack 打包之后,在 dist 目录中生成 a,b,c 三个目录,
并且每个目录中都存在 html,css,js 三个目录,里面存放相应生成的文件。
生成如下的目录结构:
- dist
|- a
|- css
|- html
`- js
|- b
|- css
|- html
`- js
`- c
|- css
|- html
`- js
- src

解决方案

说到自动生成 html 文件,第一想法就是 HtmlWebpackPlugin,但是这个插件不支持 webpack 中类似于 [name] 这样的命名,所以想用 [name] 这样的命名方式变向成生文件夹的方法是行不通的。另外,每个条 new HtmlWebpackPlugin() 语句,只能生成一个页面,像我这样要大批量生成文件,是不太方便的。

因为要做到生成的文件,有对应的目录,所以在配置 webpack 的 entry 的时候,可以使用多入口方式。

大体代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var entries: {
a: './a',
b: './b',
c: './c'
};

var entryHtmlPlugins = Object.keys(entries).map(function(entryName) {
return new HtmlWebpackPlugin({
filename: entryName + '.html',
chunks: [entryName]
});
});

module.export = {
entry: entries,
//....
plugins: [
// ..
].concat(entryHtmlPlugins)
}

参考资料

HTML Webpack Plugin
Support multiple Webpack entries

CATALOG
  1. 1. 遇到的问题
  2. 2. 解决方案
  3. 3. 参考资料