roadhog 生产环境支持静态文件名加 hash 和 CDN 配置

May 07, 2017 webpack, 前端 https://git.io/vATZi

本文仅适用于 roadhog.js 1.x 版本,现已失效,请升级到最新版本

问题来源于:https://github.com/sorrycc/roadhog/issues/69

Workaround:

思路

安装

1
npm i -D ejs-loader html-webpack-plugin webpack-md5-hash

无需安装 extract-text-webpack-plugin 因为 roadhog 已经带了 1.0.1 版,如果自己安装了 2.x 版反而可能出问题。需要额外安装 ejs-loader 因为 webpack 配置里会用到

webpack.config.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
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const WebpackMd5Hash = require('webpack-md5-hash')

module.exports = function (config, env) {
config.module.loaders[0].exclude.push(/\.ejs$/) // 注 1
if (env === 'production') {
config.output.filename = '[name].[chunkhash].js'
config.output.chunkFilename = '[chunkhash].async.js'
config.plugins[3] = new ExtractTextPlugin('[contenthash:20].css') // 注 2
config.plugins.push(
new HtmlWebpackPlugin({
template: 'ejs!src/index.ejs', // 注 3
inject: false,
minify: { collapseWhitespace: true },
production: true,
}),
new WebpackMd5Hash()
)
} else {
config.plugins.push(
new HtmlWebpackPlugin({
template: 'ejs!src/index.ejs',
inject: true,
}),
)
}
return config
}

[1] roadhog 默认配置把非 特定格式 的文件都用 url-loader 去加载,但是 html-webpack-plugin 需要的 ejs 文件会变成 base64 编码,所以要把 ejs 格式加入 loader 白名单,参考

[2] 覆盖 roadhog 的 配置

[3] roadhog 对 html 默认用的 file-loader,这里的 html-webpack-plugin 需要读取其内容作为模板,所以换成 ejs,也就不再需要 index.html

.roadhogrc

1
2
3
4
5
6
7
8
9
{
"env": {
"production": {
"define": {
"__CDN__": "https://cdn.example.com"
}
}
}
}

.eslintrc

1
2
3
4
5
{
"globals" : {
"__CDN__": false
}
}

index.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<% if (htmlWebpackPlugin.options.production) { %>
<%= htmlWebpackPlugin.files.css.map((item) => {
return `<link href="${__CDN__}${item}" rel="stylesheet">`
}) %>
<% } %>
</head>
</head>
<body>
<div id="root"></div>
<% if (htmlWebpackPlugin.options.production) { %>
<%= htmlWebpackPlugin.files.js.map((item) => {
return `<script src="${__CDN__}${item}" charset="utf-8"></script>`
}) %>
<% } %>
</body>
</html>

index.js 里去掉 `import ‘./index.html’ (如果有的话)

这样就同时兼顾了开发环境和部署环境使用同一套 html 入口,并且开发环境使用本地文件,部署环境使用按照文件内容 MD5 命名了的 CDN 文件(方便缓存控制)

参考