questions about html-loader

[honger05]

if I specify html loader

// webpack.config.js
 {
        test: /\.html$/,
        loader: 'html-loader'
 }

// and

new HtmlWebpackPlugin({
      title: 'index',
      template: 'template.html'
})

then <%= %> context don't parse

// template.html
<title><%= htmlWebpackPlugin.options.title %></title>
<img src="logo.png" />

and I hope that the Img can be translated as base64.

If I don't specify the html-loader. then HRM will throw an error.

[jantimon]

Html loader does not support underscore templates.

Which error?

[honger05]

Yes, I don't want use html-loader. I want use html-webpack-plugin.

I hope this plugin can deal <img src="logo.png" /> to <img src="base64:xxxxxxx" />

and in the webpack-dev-server, when I edit some assets, HotModuleReplacementPlugin will work.

HtmlWebpackPlugin also will work.

sometimes It does good work. others throw an error.

punycode.js:530 Uncaught TypeError: webpack_require(...) is not a function

then I must restart the server. It's Inefficient.

[jantimon]

Could you please try to investigate why this happens?
How can I reproduce the error?

[wandergis]

I also have this problem when i edit the template.html so the browser auto refresh(use the webpack-dev-server). here is my option.

/**
 * Created by WangMing on 15/12/29.
 */
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
for (key in config.entry) {
  config.entry[key].unshift('webpack-dev-server/client?http://0.0.0.0:8090', "webpack/hot/dev-server");
}
config.devtool = '#source-map';
config.plugins.push(new webpack.HotModuleReplacementPlugin());
config.plugins.push(new webpack.NoErrorsPlugin());
//启动服务
var app = new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: false,
  historyApiFallback: true,
  stats: {
    colors: true
  }
});
app.listen(8090, function(err, result) {
  if (err) {
    console.log(err);
  }
  console.log('Listening at http://localhost:8090');
});

when I edit something and press command+s,the browser will refresh,and sadily throw this error:

[wandergis]

@honger05 I solved the problem in this way，but I don't know whether it is a good way.And now I can use webpack-dev-server without any error. You can hava a try,hope it will help you.

[jantimon]

Okay I looked into it but I have no idea what is going wrong here.

/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(2)(module), (function() {

The result of __webpack_require__(2) is not a function and therefore __webpack_require__(2)(module) fails.

[jantimon]

Fixed with #179

[yanyu0517]

Have the issue was fixed? I still have the problem with version 2.14.0
I also dom't want to use html-loader, just hope the plugin can deal the <img src=""logon.png > to <img src="[hash].png">

[gilbarbara]

hey @jantimon
I'm getting this problem too while using html-loader with this plugin. I need to load the link href images from it but the template tags don't get parsed.

new HtmlWebpackPlugin({
    inject: false,
    template: 'html?attrs=link:href!./index.html'
});

[s]

[jantimon]

@gilbarbara maybe the https://github.com/jantimon/favicons-webpack-plugin might fit your needs

[airtonix]

@jantimon nope, that won't solve it, because we have precompiled favicons which can't simply be generated from one source image.

we use swig to parse the html, but that doesn't result in asset references being turned into bundled assets.

[ghost]

<title><%= htmlWebpackPlugin.options.title %></title>

ejs syntax

if you would like to use like ejs syntax in html template
you should do that

<title>{%=o.htmlWebpackPlugin.options.title%}</title>

[zhangdingding]

Has anybody got any good idea about the subject? I mean how to parse an image from <img src="xxx.png"> to <img src="xxx.hash.png"> in an elegant way?

[lock]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.