Umi: html-webpack-plugin 插件生成的 html 为 base64 编码，与预期不一致

Created on 14 Dec 2018  ·  8Comments  ·  Source: umijs/umi

环境

mac os: 10.14.1
node: 8.11.4
npm: 6.4.0
umi: 2.2.6

描述

希望生成一个 refresh.html 文件，这个文件用于 SSO 登陆鉴权，文件内有接口地址与页面地址信息读取配置来生成。

期望生成的 refresh.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <meta name="referrer" content="no-referrer">
  <meta http-equiv="refresh" content="0; url=http://api.xxx.com/jump?toUrl=http://xxx.com/redirect">
  <title>Refresh</title>
</head>
</html>

实际生成的 refresh.html 文件：

data:;base64,PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0iVVRGLTgiPgogIDxtZXRhIGh0dHAtZXF1aXY9IkNhY2hlLUNvbnRyb2wiIGNvbnRlbnQ9Im5vLWNhY2hlLCBuby1zdG9yZSwgbXVzdC1yZXZhbGlkYXRlIiAvPgogIDxtZXRhIGh0dHAtZXF1aXY9IlByYWdtYSIgY29udGVudD0ibm8tY2FjaGUiIC8+CiAgPG1ldGEgaHR0cC1lcXVpdj0iRXhwaXJlcyIgY29udGVudD0iMCIgLz4KICA8bWV0YSBuYW1lPSJyZWZlcnJlciIgY29udGVudD0ibm8tcmVmZXJyZXIiPgogIDxtZXRhIGh0dHAtZXF1aXY9InJlZnJlc2giIGNvbnRlbnQ9IjA7IHVybD1odHRwOi8vYXBpLnh4eC5jb20vanVtcD90b1VybD1odHRwOi8veHh4LmNvbS9yZWRpcmVjdCI+CiAgPHRpdGxlPlJlZnJlc2g8L3RpdGxlPgo8L2hlYWQ+CjwvaHRtbD4K

我的修改

安装 html-webpack-plugin 插件：

$ npm install -D html-webpack-plugin

在 plugin.config.js 中新增如下内容：

  config.plugin('html-webpack-plugin').use(require('html-webpack-plugin'), [
    {
      title: 'Refresh',
      filename: 'refresh.html',
      template: 'src/pages/refresh.ejs',
      inject: false,
    },
  ]);

辅助信息（个人主观分析）

一、生成的文件多了一步 base64 encode 操作

将 refresh.html 生成出的内容通过 base64 解码之后便能够得到正确的内容。

二、配置 html-loader 无效：

尝试增加 html-loader 解析等操作后依旧无效，具体增加如下内容：

  config.module
    .rule('html')
      .test(/\.html$/)
      .use('html')
      .loader('html-loader');

  config.module
    .rule('exclude')
      .exclude
      .add(/\.html$/).end();

  config.resolve.extensions.add('.html');

三、可能由 HtmlGeneratorPlugin 插件导致

尝试清除所有插件后发现 umi 在用户修改 Webpack 配置之后，对 html 增加了 HtmlGeneratorPlugin 插件进行处理。

修改增加内容如下：

  config.plugins.clear();

尝试构建抛出异常：

/Users/apple/Workspace/code/draft/ant-pro-project/node_modules/umi-build-dev/lib/plugins/commands/build/index.js:42
      service.webpackConfig.plugins.unshift(new HtmlGeneratorPlugin());
                                    ^

TypeError: Cannot read property 'unshift' of undefined
    at api.registerCommand (/Users/apple/Workspace/code/draft/ant-pro-project/node_modules/umi-build-dev/lib/plugins/commands/build/index.js:42:37)
    at Service.run (/Users/apple/Workspace/code/draft/ant-pro-project/node_modules/umi-build-dev/lib/Service.js:346:12)
    at Object.<anonymous> (/Users/apple/Workspace/code/draft/ant-pro-project/node_modules/umi/lib/scripts/build.js:14:47)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/apple/Workspace/code/draft/ant-pro-project/node_modules/umi/lib/cli.js:50:5)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
picture jianglin-wu

Most helpful comment

@jianglin-wu
我有遇到这个问题。
原因： umi默认webpack的loader依赖了umi-url-pnp-loader的这个插件,把.ejs后缀的文件转码了。
我的解决方案： 在.umirc.js文件中用webpack-chain方式给对应的loader添加exclude

image

  chainWebpack(config, {webpack}){
    config.module.rules.get('exclude').exclude.add(/\.ejs$/).end()
  },

rules.get('exclude')方法用来获取使用umi-url-pnp-loader的那个rule对象。

picture talkbear on 14 Dec 2018
👍3

All 8 comments

@jianglin-wu
我有遇到这个问题。
原因： umi默认webpack的loader依赖了umi-url-pnp-loader的这个插件,把.ejs后缀的文件转码了。
我的解决方案： 在.umirc.js文件中用webpack-chain方式给对应的loader添加exclude

image

  chainWebpack(config, {webpack}){
    config.module.rules.get('exclude').exclude.add(/\.ejs$/).end()
  },

rules.get('exclude')方法用来获取使用umi-url-pnp-loader的那个rule对象。

talkbear picture talkbear on 14 Dec 2018
👍3

@ jianglin-wu
我有遇到这个问题。
原因： umi默认webpack的loader依赖了umi-url-pnp-loader的这个插件，把.ejs后缀的文件转码了。
我的解决方案：在.umirc.js文件中用webpack-chain方式给对应的loader添加exclude

  chainWebpack(config, {webpack}){
    config.module.rules.get('exclude').exclude.add(/\.ejs$/).end()
  },

rules.get('exclude')方法用来获取使用umi-url-pnp-loader的那个rule对象。

这个方式生效了，不过没有文档的说明很容易让别人踩坑。不知道排除了 .ejs 有没有副作用，希望有人能告知一下 @云谦

jianglin-wu picture jianglin-wu on 14 Dec 2018

html 是 umi 非常重要的一环，不推荐额外使用 html-webpack-plugin 。

sorrycc picture sorrycc on 18 Dec 2018

html 是 umi 非常重要的一环，不推荐额外使用 html-webpack-plugin 。

refresh.html 是常见的 SSO 解决方案，希望文档能够注明，或者有其他解决方案。

jianglin-wu picture jianglin-wu on 18 Dec 2018

@sorrycc 如何在不使用html-webpack-plugin条件下，输出多入口html文件？

talkbear picture talkbear on 19 Dec 2018

refresh.html 是写死内容的吗？是的话，存在 /public 目录下就好了。

sorrycc picture sorrycc on 20 Dec 2018

refresh.html 是写死内容的吗？是的话，存在 /public 目录下就好了。

refresh.html 文件包含了服务器地址与 web 应用地址等信息，我们希望这些信息能够通过读取配置信息编译生成，而不是放到 public。

jianglin-wu picture jianglin-wu on 22 Dec 2018

@sorrycc 如何在不使用html-webpack-plugin条件下，使用preload-webpack-plugin？

ZhouHansen picture ZhouHansen on 26 Aug 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

mizi-lin picture mizi-lin  ·  3Comments
Artoria-0x04 picture Artoria-0x04  ·  3Comments
zhanchengkun picture zhanchengkun  ·  3Comments
ddzy picture ddzy  ·  3Comments
six-666 picture six-666  ·  3Comments