roadhog 生產環境支援靜態檔名加 hash 和 CDN 配置

mdluo發表於2019-02-16
HOG

問題來源於：https://github.com/sorrycc/ro…

Workaround:

思路

安裝

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

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

{
  "env": {
    "production": {
      "define": {
        "__CDN__": "https://cdn.example.com"
      }
    }
  }
}

.eslintrc

{
  "globals" : {
    "__CDN__": false
  }
}

index.ejs

<!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 檔案（方便快取控制）

參考

相關文章