The partial content is not minified as defined in the HtmlWebpackPlugin

jpagex commented 5 years ago

The HtmlWebpackPlugin has options to minify the HTML (https://github.com/jantimon/html-webpack-plugin#minification). The content of the injected partials does not seem to be minified.

colbyfayock commented 5 years ago

@jpagex thanks for the heads up, let me see what i can do. I'll try to take a look this week, otherwise feel free to open a PR in the meantime

colbyfayock commented 5 years ago

@jpagex are you having trouble with CSS / JS not minifying? or everything? I'm not having luck getting CSS / JS to minify. html-webpack-plugin uses html-minifier. I tried running that separately on the code through html-webpack-partials-plugin and it doesn't want to minify the embedded CSS or JS as seen below. notice that the HTML itself is minified. I'll keep looking into this and figure out why, but curious if it's the same issue or separate

partials/body.html
--
<style>
body {
  background-color: purple;
}
</style>

<h1>Hello world!</h1>

<h2>webpack.config.js</h2>

<div>
  Test
</div>

<script>
console.log('test');
console.log('one');
console.log('two');
console.log('three');
</script>

dist/index.html
--
<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"></head><body><style>body {
  background-color: purple;
}</style><h1>Hello world!</h1><h2>webpack.config.js</h2><div>Test</div><script>console.log('test');
console.log('one');
console.log('two');
console.log('three');</script></body></html><script src="main.js"></script>

colbyfayock commented 5 years ago

if the issue is CSS/JS, HTML Webpack Plugin doesn't minify that by default, so we have to add it manually. it looks like it works as expected when passing it as an additional option: https://github.com/colbyfayock/html-webpack-partials-plugin/tree/master/examples/minify

let me know if that fixes your issue

jpagex commented 5 years ago

Sorry for the delay. Your solution (see below) is working well, thanks! Indeed, HtmlWebpackPlugin is only minifying the HTML by default.

new HtmlWebpackPlugin({
  minify: {
    // Begin HTML Webpack Plugin Default
    collapseWhitespace: true,
    removeComments: true,
    removeRedundantAttributes: true,
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    useShortDoctype: true,
    // End HTML Webpack Plugin Default

    minifyJS: true,
    minifyCSS: true,
  },
)

colbyfayock / html-webpack-partials-plugin

The partial content is not minified as defined in the HtmlWebpackPlugin #6