Menu
I have read the part of the Webpack documentation that explains why Webpack will minify HTML when setting a loader using the module.loaders syntax. But I can't find anywhere that explains how to stop this. I am using pug-loader and html-webpack-plugin to process my templates, but Webpack always spits them out with the HTML minified.
How can I stop this?
{
test: /\.pug$/,
use: 'pug-loader'
}
new HtmlWebpackPlugin({
title: 'Home',
filename: 'index.html',
template: './src/index.pug',
inject: 'head',
chunks: ['app'],
hash: true
}),
387
In the Webpack, We can use the optimization to avoid the minification. Then, It build the minified version of our source file into the destination file.
In webpack, minification process is controlled through two configuration fields: optimization. minimize flag to toggle it and optimization. minimizer array to configure the process. To tune the defaults, we'll attach terser-webpack-plugin to the project so that it's possible to adjust it.
The html-loader will parse the URLs, require the images and everything you expect. The extract loader will parse the javascript back into a proper html file, ensuring images are required and point to proper path, and the asset modules will write the .html file for you. Example: webpack.config.js module.
This issue may help you.
loaders: [
{
test: /\.pug$/,
exclude: /(node_modules)/,
loader: "pug-html",
query: {
pretty: true
}
}
]
There's an option for html-webpack-plugin. minify: false. Have you tried adding that?
https://github.com/jantimon/html-webpack-plugin#configuration
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
