js&css cannot be injected into the HTML file @version 2 #135

xiaoyunchen · 2015-12-08T08:05:02Z

this is my config:

new HtmlWebpackPlugin({                     
            favicon:'./src/img/favicon.ico',
            filename:'/view/index.html',    
            template:'./src/view/index.html',   
            inject:true,
            hash:true,  
            minify:{    
                removeComments:true,    
                collapseWhitespace:false    
            }
        })

the same config file,If I use the version 1.7,it works!
But when I update to version 2,js&css cannot be injected into the HTML file,and even more, collapseWhitespace option in the minify option is not works neither.please check it and thanks.

jantimon · 2015-12-13T09:13:49Z

Is this a duplicate of #128 ?

xiaoyunchen · 2015-12-13T13:10:15Z

I checked the #128 issue before submit this one,and it's not the same.
I don't use any js template like jade but only plain HTML.
And I also attach this attribute removeOptionalTags=false for the html-loader,but the problems still exist.

So the new version is worked in your project?Or I missed something important？

jantimon · 2016-01-08T08:46:40Z

@xiaoyunchen could you please try if it works now?

xiaoyunchen · 2016-01-14T07:38:28Z

SORRY!Reply so late.
And I checked this problem with version 2.6.1,the js&css files can be injected into the HTML file but another problem comes.
When I use html-webpack-plugin and UglifyJsPlugin (minify and ungify my JS files),the HTML looks like below:

two head tags!

And this is part of my webpack config file:

plugins:[
        new webpack.ProvidePlugin({ 
            $: 'jquery'
        }),
        new ExtractTextPlugin("css/[name].css"),
        new webpack.optimize.UglifyJsPlugin({   
            compress: {
                warnings: false
            },
            except: ['$super', '$', 'exports', 'require']   
        }),
        new HtmlWebpackPlugin({                     
            favicon:'./src/img/favicon.ico', 
            filename:'/view/index.html',    
            template:'./src/view/index.html',   
            inject:true,    
            hash:true,  
            minify:{    
                removeComments:true,    
                collapseWhitespace:true 
            }
        })
    ]

and thx!

jantimon · 2016-01-14T08:54:28Z

Oh thanks for the bug report could you please show me the source of ./src/view/index.html ?

xiaoyunchen · 2016-01-14T08:56:41Z

Yes,it's so simple:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Index主页</title>
        <meta name="author" content="https://github.com/xiaoyunchen/webpack"/>
        <meta name="date" content="2015-12-3"/>
        <meta name="description" content="for test"/>
        <!--
            comments here
        -->
    </head>
    <body>
        <p>
            <button id="btn">Add</button>
        </p>
        <!--
            another comment and should be removed
        -->
    </body>
</html>

jantimon · 2016-01-14T09:09:48Z

From: https://github.com/ampedandwired/html-webpack-plugin/tree/feature/loaders/examples/html-loader
This seems to be an html-loader bug

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <img src="logo.png">
</body>
</html>

Now if you add the Uglify plugin the html-loader uses aggressive minfification:

<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Example template</title><meta name=viewport content="width=device-width,initial-scale=1"><body><img src=0714810ae3fb211173e2964249507195.png>

As you can see it removes ALL closing html tags.

xiaoyunchen · 2016-01-14T09:12:07Z

Yes,without the ending tags of html/body/head

jantimon · 2016-01-14T09:42:57Z

There is already an issue for that: webpack-contrib/html-loader#40 and a pull request:
webpack-contrib/html-loader#43

jantimon · 2016-01-14T09:45:32Z

For now you can disable removeOptionalTags in your html loader configuration:

  { test: /\.html$/, loader: 'html-loader?-removeOptionalTags' },

xiaoyunchen · 2016-01-14T09:46:23Z

OK,Thx for that and I will try this

xiaoyunchen · 2016-01-25T09:38:45Z

the CSS cannot be injected either even disable removeOptionalTags option
but the JS file works normally

jantimon · 2016-01-25T15:10:15Z

Please see the examples folder :)

lock · 2018-06-01T01:25:18Z

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.

jantimon mentioned this issue Dec 17, 2015

[feature/loaders] html-loader strips </body> when minimizing #144

Closed

jantimon added the bug label Dec 17, 2015

jantimon added a commit that referenced this issue Jan 7, 2016

#135 Inject css and js even if the html file is incomplete

68428b5

jantimon closed this as completed Jan 11, 2016

jantimon reopened this Jan 14, 2016

jantimon closed this as completed Jan 19, 2016

renovate bot mentioned this issue Apr 17, 2018

Update html-webpack-plugin to 3.2.0-abandoned sbardian/DebtTrackerAPI#10

Closed

lock bot locked as resolved and limited conversation to collaborators Jun 1, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

js&css cannot be injected into the HTML file @version 2 #135

js&css cannot be injected into the HTML file @version 2 #135

xiaoyunchen commented Dec 8, 2015

jantimon commented Dec 13, 2015

xiaoyunchen commented Dec 13, 2015

jantimon commented Jan 8, 2016

xiaoyunchen commented Jan 14, 2016

jantimon commented Jan 14, 2016

xiaoyunchen commented Jan 14, 2016

jantimon commented Jan 14, 2016

xiaoyunchen commented Jan 14, 2016

jantimon commented Jan 14, 2016

jantimon commented Jan 14, 2016

xiaoyunchen commented Jan 14, 2016

xiaoyunchen commented Jan 25, 2016

jantimon commented Jan 25, 2016

lock bot commented Jun 1, 2018