Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

html-webpack-plugin问题 #231

Closed
flicker85 opened this issue Apr 26, 2017 · 5 comments
Closed

html-webpack-plugin问题 #231

flicker85 opened this issue Apr 26, 2017 · 5 comments

Comments

@flicker85
Copy link

请问在roadhog中使用html-webpack-plugin，webpack.config.js应该怎么配置？

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = function (webpackConfig, env) {
  if (env === 'production') {
    webpackConfig.plugins.push(new HtmlWebpackPlugin({
      filename:'test.html',
    }));
  }
  return webpackConfig;
}

dist目录下生成得test.html：

<head><link href="/index.css" rel="stylesheet"></head>data:application/octet-stream;base64,PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiPgogICAgPHRpdGxlPjwlPSBodG1sV2VicGFja1BsdWdpbi5vcHRpb25zLnRpdGxlICU+PC90aXRsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgPC9ib2R5Pgo8L2h0bWw+<script type="text/javascript" src="/index.js"></script>

希望生成得html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link href="/index.css" rel="stylesheet">
  </head>
  <body>
    <script type="text/javascript" src="/index.js"></script>
  </body>
</html>
@l1990
Copy link

l1990 commented Apr 27, 2017 •
edited
Loading

{ test: /\.html$/, loader: 'file?name=[name].[ext]' }
roadhog中给html配置了file-loader，html-webpack-plugin在用file-loader解析html的时候有bug，把loader改成html就可以了，如下：
{ test: /\.html$/, loader: 'html?name=[name].[ext]' }
但是这种方式需要改roadhog中默认的webpack.config.dev.js和webpack.config.prod.js，还是等作者做出更优雅的处理吧。 @sorrycc

@l1990
Copy link

l1990 commented Apr 28, 2017

找到个比较好的处理方式，将html-webpack-plugin的template写成下面这种方式：
template: '!!html!./src/my-template.html',

@zhangshihuann
Copy link

遇到同样的问题 HtmlWebpackPlugin不指定template的话就输出跟楼主一样的data:application...开头的串，加上template的话输出的内容就会变成的名字，求解

@zhangshihuann
Copy link

@flicker85 解决了 module那里处理html用html-loader就可以了

@flicker85
Copy link
Author

@zhangshihuann
没看明白，能把你的webpack.conf代码贴出来看下么？

@zhangshihuann
Copy link

image
处理一下module.loaders

@flicker85
Copy link
Author

@zhangshihuann 已经弄好啦，thx~

@chenkang084 chenkang084 mentioned this issue Jun 29, 2017
Closed
@MinjieChang MinjieChang mentioned this issue Mar 8, 2021
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@zhangshihuann @flicker85 @l1990