Superman-wc commented 7 years ago

看了一下config 中的文件，生产环境中不支持 hash 文件名啊，，希望赶紧支持起来哦！

sorrycc commented 7 years ago

好，下个版本。

Superman-wc commented 7 years ago

如果可以的话，支持hash 后，在build 后集成处理html文件中对js,css文件引用的路径修改，以前使用atool-build 时，都是用gulp 处理，，感觉只是光有hash还是很不完美的！

sorrycc commented 7 years ago

shenqihui commented 7 years ago

+1

se1phine commented 7 years ago

+1

zzwzzhao commented 7 years ago

+1

rendongsc commented 7 years ago

+1

mdluo commented 7 years ago

Workaround:

思路

使用 webpack output 来给 js 文件加 hash
使用插件 extract-text-webpack-plugin 来给 css 文件加 hash
使用插件 html-webpack-plugin 来自动根据 webpack 加的 hash 来引入对应的 css 和 js 并生成 html 文件
使用插件 webpack-chunk-hash 来覆盖 webpack 的默认计算 hash 的方式，使用文件内容的 md5 来生成 chunkhash，避免分布式部署的时候生成文件名不一致

安装

npm i -D ejs-loader html-webpack-plugin webpack-chunk-hash

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

webpack.config.js

const fs = require('fs')

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const WebpackChunkHash = require('webpack-chunk-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: true,
        minify: { collapseWhitespace: true },
        production: true,
      }),
      new WebpackChunkHash({ algorithm: 'md5' })
    )
  } 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": {
      "publicPath": "https://cdn.example.com/"
    }
  }
}

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">
</head>
</head>
<body>
  <div id="root"></div>
</body>
</html>

index.js

去掉 import './index.html' （如果有的话）