`minimize: true` doesn't remove white spaces between tags in HTML files

[emnajaoua]

I'm submitting a bug report

Webpack version:
2.2.0

HTML-Loader version:
0.5.1

Please tell us about your environment:
Windows 10

Current behavior:
minimize:true doesn't remove white spaces between Tags in HTML files

Expected/desired behavior:
While building the files in webpack, the html-loader with the option minimize:true is supposed to remove the white spaces in the HTML file

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with a gist/jsbin of your webpack configuration.

• What is the expected behavior?

• What is the motivation / use case for changing the behavior?

• Browser: [Chrome 64.0.3282.167 ]

• Language: [ES6/7]

[michael-ciniawsky]

@emnajaoua Please provide more info about your setup package.json, webpack.config.js and a small example of currently unminified code

[emnajaoua]

my package.json has those devDependencies:{
"html-webpack-plugin": "^2.7.1",
"html-loader": "0.5.1",
"webpack": "2.2.0",
"webpack-dev-server": "2.2.0"
}
my setup in webpack.config.js
module.exports = (function makeWebpackConfig() { const config = {}; //some code here config.module = { rules: [ { // HTML LOADER // Reference: https://github.com/webpack/raw-loader // Allow loading html through js test: /\.html$/, loader: 'html-loader', options: { minimize: true, }, }], };
Concerning the example, I cannot really give the code but I can explain more.
I have 2 HTML files: the first HTML file represents a directive that calls the second HTML file. When I build my web application, the 2 html files are regrouped, there is a space between the closing tag of the second html file and the first html file.
For Example:
<h1>Test1<h2>Test2</h1> </h2>
and I don't want that space because in my controller , I am accessing the lastChild of the whole element(first HTML file combined with the second), and the lastChild return textNode which is the space between the 2 directives. and This is not the intended behavior.
The intended behavior is
<h1>Test1<h2>Test2</h2></h1>
I hope I was clear somehow.

[michael-ciniawsky]

How do you import the second HTML file ? The problem here is that the html-minifier runs per file (module) and in your case it would need to run on the asset (like e.g uglifyjs runs on bundle.js). html-webpack-plugin has a minify option I think (not 💯) which hopefully runs on the whole asset, could you try that instead ?

[alexander-akait]

Remove spaces between tags is not safe when you use display: inline-block, it is remove spaces between inline block dom nodes

[emnajaoua]

@michael-ciniawsky I tried the minify option in html-webpack-plugin like this:
config.plugins.push(
new HtmlWebpackPlugin({
template: './app/index.html',
favicon: './app/favicon.ico',
inject: 'body',
minify: {
collapseWhitespace: true,
}
}),

  // Reference: https://github.com/webpack/extract-text-webpack-plugin
  // Extract css files
  // Disabled when in test mode or not in build mode
  new ExtractTextPlugin({ filename: 'css/[name].css', disable: !isProd, allChunks: true })
);

but didn't work :\
Any other suggestions please ?

[emnajaoua]

I added display: inline-block in my css file that corresponds to the first HTML file and the second also. But still didn't fix the problem

[ReneeSlamka]

@emnajaoua try adding "conservativeCollapse: false" to your webpack configuration file. It looks like setting "minimize: true" enables this attribute by default, which will cause white space to collapse to 1 space (https://github.com/kangax/html-minifier#options-quick-reference).

[emnajaoua]

It worked! Thank you so much :)

[alexander-akait]

Answer above, thanks for issue