.roadhogrc hash设置为true build后的html的js和css没有带上hash #386

zjafei · 2017-08-15T15:25:12Z

Environment(required) | 环境（必填）

roadhog version: 1.1.1
Nodejs and Npm version: 6.5.0
Operating environment (e.g. OS name) and its version: ubunt 16.04.3

What did you do? Please provide steps to re-produce your problem.（请提供复现步骤）

.roadhogrc.js

export default {
  "entry": "src/index.js",
  "env": {
    "development": {
      "extraBabelPlugins": [
        "dva-hmr",
        "transform-runtime"
      ]
    },
    "production": {
      "extraBabelPlugins": [
        "transform-runtime"
      ]
    }
  },
  "hash":true,
};

pubulic文件夹下的index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dva Demo</title>
  <link rel="stylesheet" href="/index.css" />
</head>
<body>

<div id="root"></div>

<script src="/index.js"></script>

</body>
</html>

package.json

{
  "private": true,
  "scripts": {
    "start": "roadhog server",
    "build": "roadhog build",
    "lint": "eslint --ext .js src test",
    "precommit": "npm run lint"
  },
  "engines": {
    "install-node": "6.9.2"
  },
  "dependencies": {
    "babel-runtime": "^6.9.2",
    "dva": "^1.2.1",
    "react": "^15.4.0",
    "react-dom": "^15.4.0"
  },
  "devDependencies": {
    "babel-eslint": "^7.1.1",
    "babel-plugin-dva-hmr": "^0.3.2",
    "babel-plugin-transform-runtime": "^6.9.0",
    "eslint": "^3.12.2",
    "eslint-config-airbnb": "^13.0.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^2.2.3",
    "eslint-plugin-react": "^6.8.0",
    "expect": "^1.20.2",
    "husky": "^0.12.0",
    "redbox-react": "^1.3.2",
    "roadhog": "1.1.1"
  }
}

项目结构

执行 npm run build 后的项目结构

What do you expected?（预期的正常效果）

dist目录下的index.html内容为

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dva Demo</title>
  <link rel="stylesheet" href="/index.6a7e261f803958c80e1f.css" />
</head>
<body>

<div id="root"></div>

<script src="/index.6a7e261f803958c80e1f.js"></script>

</body>
</html>

What happen?（发生了何种非正常现象）

可是实际结果，dist目录下的index.html内容为

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dva Demo</title>
  <link rel="stylesheet" href="/index.css" />
</head>
<body>

<div id="root"></div>

<script src="/index.js"></script>

</body>
</html>

js和css并么有带上hash

The text was updated successfully, but these errors were encountered:

smilefufu · 2017-08-16T08:14:42Z

正想提这个issue，看到你提了。刚从dva默认的0.5.4升到1.1.1，试了一下hash，build出来的确实是带hash了，但index.html里的还是/index.js和/index.css，所以每次build完还得去dist里改一下index.html。。。略微有点蛋疼。。。

not3 · 2017-08-16T09:03:25Z

https://github.com/zuiidea/antd-admin/blob/master/webpack.config.js

参考这里，用了HtmlWebpackPlugin

smallos · 2017-08-17T09:05:17Z

+1 单页的项目也遇到这个问题

ouzhou · 2017-08-17T09:30:08Z

#391 解决方案 @smilefufu

sorrycc · 2017-08-18T02:08:25Z

支持 HtmlWebpackPlugin，基于约定，存在 src/index.ejs 即开启此功能 (#356)

仔细看 Release Note，需要有 src/index.ejs 才会开启 HTMLWebpackPlugin。

smilefufu · 2017-08-18T06:32:19Z

感谢，自己尝试了一下，已经搞定。
在src下创建index.ejs文件，内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>mysite</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

HTMLWebpackPlugin会自动往里面插入带hash的css和js。此模式下原publish下的index.html就没用了，而是用index.ejs作为模板。

huyawei · 2017-08-28T09:14:44Z

@smilefufu 还有其他配置吗？ src 下添加这个文件配置里打开 hash: true, npm run build 还是老样子

smilefufu · 2017-08-28T09:50:49Z

@huyawei 没有别的配置了，你检查一下是不是roadhog版本不对？老版本roadhog不支持hash这个参数。我roadhog版本号是1.1.1

huangxiaohao · 2018-08-21T08:30:29Z

@smilefufu您好我按照你们讨论的写法如下写了，但是打包出来的文件名还是没有处理过的。配置如下：
.roadhogrc：
{ "env": { "development": { "extraBabelPlugins": [ "transform-runtime", ["import", { "libraryName": "antd", "style": "css" }] ] } }, "build": { "production": { "extraBabelPlugins": [ "transform-runtime", ["import", { "libraryName": "antd", "style": "css" }] ] } }, "hash": true, }

已经在src下创建index.ejs的文件

package.json：
{ "private": true, "scripts": { "start": "roadhog server", "build": "roadhog build", "lint": "eslint --ext .js src test", "precommit": "npm run lint" }, "homepage": "./", "dependencies": { "antd": "^3.7.3", "dva": "^2.3.1", "rc-bmap": "^0.1.8", "react": "^16.2.0", "react-clamp-lines": "^1.1.0", "react-dom": "^16.2.0" }, "devDependencies": { "babel-plugin-dva-hmr": "^0.3.2", "babel-plugin-import": "^1.8.0", "eslint": "^4.14.0", "eslint-config-umi": "^0.1.1", "eslint-plugin-flowtype": "^2.34.1", "eslint-plugin-import": "^2.6.0", "eslint-plugin-jsx-a11y": "^5.1.1", "eslint-plugin-react": "^7.1.0", "husky": "^0.12.0", "redbox-react": "^1.4.3", "roadhog": "^2.0.0" } }

结果如下：

smilefufu · 2018-08-23T08:59:11Z

@huangxiaohao roadhog 2.0 的配置文件改成.webpackrc，你写.roadhogrc肯定无效嘛。
你参考一下发布日志：sorrycc/blog#55 在下面评论有讨论关于开启hash的讨论。

huangxiaohao · 2018-08-23T09:50:59Z

@smilefufu 您好感谢您的回复。
1.我看了issues/55，是不是可以这么理解：.roadhogrc可以为空，所内容写在.webpackrc内。
2.我按照您说的，把相关配置写在了.webpackrc内，

{
  "entry": "src/index.js",
  "extraBabelPlugins": [
   ["import", { "libraryName": "antd", "style": "css" }]
  ],
  "proxy": {
    "/api": {
      "target": "http://192.168...",
      "changeOrigin": true,
      "pathRewrite": { "^/api": "" }
    }
  },
  "env": {
    "development": {
      "extraBabelPlugins": [
        "dva-hmr",
        "transform-runtime",
        ["import", { "libraryName": "antd", "style": "css" }]
      ]
    },
    "production": {
      "extraBabelPlugins": [
        "transform-runtime",
        ["import", { "libraryName": "antd", "style": "css" }]
      ]
    }
  },
  hash : true,
}

但是结果还是一样，打包出来的文件名还是没有加hash

smilefufu · 2018-08-30T06:11:50Z

@huangxiaohao
认真看文档。发布日志最后几行有写：

再然后，如果有 src/index.ejs，需要额外配置 html 属性，

"html": { "template": "./src/index.ejs" }

HeeBooo · 2018-08-30T06:28:52Z

非常感谢你的分享，帮助我解决了问题。 =3=

huangxiaohao · 2018-09-05T01:49:42Z

@smilefufu 感谢回复这一句我也加上了但是还是没有效果。😢
@HeeBooo 请问您是如何解决这个问题的？

sorrycc mentioned this issue Aug 18, 2017

最新1.1.2支持的hash参数，并不会把html里的路径替换掉 #391

Closed

sorrycc closed this as completed Aug 18, 2017

afc163 mentioned this issue Nov 13, 2017

请问build如何能给js和css加上hash值？ ant-design/ant-design-pro#160

Closed

kkfnui mentioned this issue Nov 15, 2017

js 缓存问题 ant-design/ant-design-pro#200

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

.roadhogrc hash设置为true build后的html的js和css没有带上hash #386

.roadhogrc hash设置为true build后的html的js和css没有带上hash #386

zjafei commented Aug 15, 2017

smilefufu commented Aug 16, 2017

not3 commented Aug 16, 2017

smallos commented Aug 17, 2017

ouzhou commented Aug 17, 2017

sorrycc commented Aug 18, 2017 •

edited

Loading

smilefufu commented Aug 18, 2017 •

edited

Loading

huyawei commented Aug 28, 2017

smilefufu commented Aug 28, 2017

huangxiaohao commented Aug 21, 2018

smilefufu commented Aug 23, 2018

huangxiaohao commented Aug 23, 2018

smilefufu commented Aug 30, 2018

HeeBooo commented Aug 30, 2018

huangxiaohao commented Sep 5, 2018

.roadhogrc hash设置为true build后的html的js和css没有带上hash #386

.roadhogrc hash设置为true build后的html的js和css没有带上hash #386

Comments

zjafei commented Aug 15, 2017

Environment(required) | 环境（必填）

What did you do? Please provide steps to re-produce your problem.（请提供复现步骤）

What do you expected?（预期的正常效果）

What happen?（发生了何种非正常现象）

smilefufu commented Aug 16, 2017

not3 commented Aug 16, 2017

smallos commented Aug 17, 2017

ouzhou commented Aug 17, 2017

sorrycc commented Aug 18, 2017 • edited Loading

smilefufu commented Aug 18, 2017 • edited Loading

huyawei commented Aug 28, 2017

smilefufu commented Aug 28, 2017

huangxiaohao commented Aug 21, 2018

smilefufu commented Aug 23, 2018

huangxiaohao commented Aug 23, 2018

smilefufu commented Aug 30, 2018

HeeBooo commented Aug 30, 2018

huangxiaohao commented Sep 5, 2018

sorrycc commented Aug 18, 2017 •

edited

Loading

smilefufu commented Aug 18, 2017 •

edited

Loading