Comments (19)
toverux
commented on June 19, 2024
1
I use it this way, and that works :
{ test: /\.html$/, loader: 'html?minimize=false', exclude: [root('src', 'index.html')] },https://github.com/webpack/html-loader/blob/master/index.js#L68
And yes, I agree, these are very destructive defaults :/
from html-loader.
ccorcos
commented on June 19, 2024
1
Whats going on is there are two configurations to effectively turn on minification. One is the htmlLoader field. so if you put htmlLoader: { minimize: false }, then that will override this.minimize which I believe is set when running webpack -p
from html-loader.
ghjagus
commented on June 19, 2024
1
Is there a way that minimize the html string but keep case sensitive?Because i use PascalCase-style to name my components.
from html-loader.
ccorcos
commented on June 19, 2024
These defaults are terrible:
https://github.com/webpack/html-loader/blob/master/index.js#L71-L88
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Skeleton App</title> <meta name=viewport content="width=device-width,initial-scale=1"> </head> <body> <div id=root></div> <img src=<%=ROOT_URL%>/7d3f8da0eae1b0de9b3e8ef7ac4615b4.png /> <script type="text/javascript" src="<%=ROOT_URL%>/index-542e410e44a0f3d636e0.js"></script></body> </html>
from html-loader.
ccorcos
commented on June 19, 2024
I think it would be great if they were configurable but I cant figure out how to do that. Perhaps its a porblem with using it inside HtmlWebpackPlugin
from html-loader.
ccorcos
commented on June 19, 2024
hmm. the problem is I'm using it with the Webpack HTML Plugin...
from html-loader.
toverux
commented on June 19, 2024
Me too :) And the HtmlWebpackPlugin does not seem to cause any problem here, it's just html-loader's minimification, at least in my configuration (note that I also have excluded index.html in html-loader's configuration):
const BASE_CONFIG = {
plugins: [
new HtmlWebpackPlugin({ template: 'src/index.html' })
],
module: {
loaders: [
{ test: /\.html$/, loader: 'html?minimize=false', exclude: [root('src', 'index.html')] }
]
}
};from html-loader.
imvetri
commented on June 19, 2024
You can try the following? Please dont mind. i didnt try the code, I could guess this from the code
https://github.com/webpack/html-loader/blob/master/index.js#L68 difference.
htmlLoader:{"removeComments : false",
"removeCommentsFromCDATA : false",
"removeCDATASectionsFromCDATA : false",
"collapseWhitespace : false",
"conservativeCollapse : false",
"removeAttributeQuotes : false",
"useShortDoctype : false",
"keepClosingSlash : false",
"minifyJS : false",
"minifyCSS : false",
"removeScriptTypeAttributes : false",
"removeStyleTypeAttributes : false"}
from html-loader.
imvetri
commented on June 19, 2024
@ccorcos Can i request something? Could you share information on How you specifically opened the code difference at https://github.com/webpack/html-loader/issues/url ?
Above comment is my first comment on a open source 💃 yay. and i am curious how you were able to point at specific piece of code.
from html-loader.
ccorcos
commented on June 19, 2024
So I'm using the html webpack plugin like this:
new HtmlWebpackPlugin({
template: `!html!${config.html}`,
inject: 'body',
}),It appears that adding any inline query params causes errors, and when I use something like...
htmlLoader: {
removeComments: false,
removeCommentsFromCDATA: false,
removeCDATASectionsFromCDATA: false,
collapseWhitespace: false,
conservativeCollapse: false,
removeAttributeQuotes: false,
useShortDoctype: false,
keepClosingSlash: false,
minifyJS: false,
minifyCSS: false,
removeScriptTypeAttributes: false,
removeStyleTypeAttributes: false
},... it doesnt work either.
@imvetri When you are looking at code on github, click a line number and it it will get highlighted and change the url. You can also shift-click to another location to highlight a range.
from html-loader.
jackyon
commented on June 19, 2024
not working for me either, the html code still get compressed..
is there any solution for this issue?
from html-loader.
imvetri
commented on June 19, 2024
Can someone help me understand with this condition
https://github.com/webpack/html-loader/blob/master/index.js#L68
I suspect this line and it is taking program control inside the IF block all ways.
Hence minify=true is not working?
from html-loader.
abelokon
commented on June 19, 2024
+1 same problem using HtmlWebpackPlugin - any updates?
from html-loader.
ccorcos
commented on June 19, 2024
I didnt figure anything out -- at then end of the day, it does work...
from html-loader.
joshwiens
commented on June 19, 2024
@abelokon There are a few "problems" mentioned here. The original was the defaults for html loader in regards to minification which has been changed. The second was effectively minifing twice.
Could you be a bit more specific to which issue you are referencing?
from html-loader.
abelokon
commented on June 19, 2024
@d3viant0ne As already mentioned I'm also using HtmlWebpackPlugin and trying figure out how to turn off the minification of my html files. Since the first snippet posted here didn't work for me either, I agreed.
from html-loader.
eladchen
commented on June 19, 2024
FYI: Looking at this commit @ index.js:19
It seems that there is an issue with how "configKey" is looked up. The config key is looked up using
hasOwnProperty( ... ) on 'context.options' - This will never yield true, as the key does exists, but on 'context.options.prototype'.
Edit:
To overcome this alleged issue, the only way to provide options, is to use the syntax suggested in the loaders query parameters docs.
In order to disable minimizing, use:
loaders: [ {
test: /\.html$/,
loader: 'html-loader',
query: {
minimize: false
}
} ]
Please correct me if I'm wrong.
from html-loader.
hemanth
commented on June 19, 2024
Thanks for reporting, this is fixed in #116.
from html-loader.
amirhosein993
commented on June 19, 2024
I use it this way, and that works :
{ test: /\.html$/, loader: 'html?minimize=false', exclude: [root('src', 'index.html')] },https://github.com/webpack/html-loader/blob/master/index.js#L68
And yes, I agree, these are very destructive defaults :/
where to write this?
thanks
from html-loader.
Related Issues (20)
- How to trigger re-compile if partial changed? HOT 4
- when to publish tag on 'fix(getOptions): deprecation change' HOT 1
- Style attribute with expansion variable is omitted when minimized HOT 2
- Favicon: Module not found HOT 5
- After upgrading from v1.3.2 to v2.1.2, <%= require("html-loader!x.html") %> is not available. HOT 1
- Parse errors with html content containing < HOT 4
- this.getOptions is not a function HOT 1
- params “source: false” is falied HOT 2
- remove documentation of use cases involving extract-loader HOT 4
- When extending default sources, tag is not optional HOT 1
- Emits seperate js file even when target is `webworker` and max chunks is 1 HOT 6
- Readd root as webpack resolve.roots does not allow conditionally resolve HOT 3
- Possibility to extend default 'minimize' options HOT 7
- require(...) is not a function - PostHTML HOT 1
- David and HTML Loader badges are broken HOT 5
- ignoring noscript HOT 9
- DIfferent behavior in development and production modes HOT 1
- Two Created Files HOT 1
- Webpack 5 output.clean deletes loaded resources on rebuild HOT 2
- HTML comments don't show up correctly in the documentation on webpack.js.org HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from html-loader.