Html-webpack-plugin: Inline scripting support

Created on 21 Oct 2015 · 29Comments · Source: jantimon/html-webpack-plugin

How about making it possible to inline bundle instead of putting a link to it?

Source

muodov

Most helpful comment

This can be done with script-ext-html-webpack-plugin.

poeschko on 26 Jan 2017

👍2

All 29 comments

<script>
<%= requie('raw!script.js') %>
</script>

NekR on 21 Oct 2015

Interesting idea

jantimon on 22 Oct 2015

pkantsedalov on 30 Oct 2015

I have tried to use this technique like so:

    new HtmlWebpackPlugin
      inject: no
      templateContent:
        """
        <!DOCTYPE html>
        <html>
          <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
            <style>{%= require('raw!client.css') %}</style>
            <script>{%= require('raw!client.js') %}</script>
          </head>
          <body>
          </body>
        </html>
        """

But it doesn't works properly. In the result index.html contains next error report:

Error: HtmlWebpackPlugin: template error ReferenceError: require is not defined

katyo on 6 Dec 2015

Has anybody had any success with this yet? I've seen this sort of functionality mentioned in various places (e.g. https://github.com/webpack/webpack/tree/master/examples/chunkhash [independent of this plugin]) but can't seem to find any information about _how_ it's done.

davezuko on 8 Dec 2015

Is this feature available now?

ianwith on 16 Dec 2015

@ianwith afaik nobody is working on this feature

jantimon on 17 Dec 2015

I use something like that:

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'frontend/index.html',
  inject: true,
  inline: fs.readFileSync('frontend/inline.js', 'utf8'),
  excludeChunks: ['admin']
})

and

<script><%= htmlWebpackPlugin.options.inline %></script>

QiV on 6 Jan 2016

@QiV but this would inline it before it is compiled - as you read the file during the webpack configuration phase

jantimon on 7 Jan 2016

Would #191 solve this for you?

jantimon on 28 Jan 2016

This issue reminds me of https://github.com/brunch/brunch/issues/633. The proper solution to the problem presented here is to create an isomorphic app (it's not _really_ Universal unless it runs everywhere and isn't a fat client IMHO). Once you're no longer a prisoner of the browser you can pretty much do anything you want, and you won't be needing to inline assets via a build script.

Here's a list including a few isomorphic starter kits I've surveyed for those who are interested in leaning away from the inlining of assets as raised by the OP.

ghost on 4 Feb 2016

@jhabdas the main focus of webpack is to build browser apps. libraries might be universal - but apps not. this thread has nothing to do with isomorphic or universal. for more information on that topic see isomorphic example

jantimon on 4 Feb 2016

Sometimes to achieve things we need to think about our desires in a new
light. I also saw the inject functionality which seems like it should close
this issue.
On Thu, Feb 4, 2016 at 1:11 AM Jan Nicklas [email protected] wrote:

@jhabdas https://github.com/jhabdas the main focus of webpack is to
build browser apps. libraries might be universal - but apps not. this
thread has nothing to do with isomorphic or universal. for more information
on that topic see isomorphic example
https://github.com/ampedandwired/html-webpack-plugin/tree/master/examples/javascript-advanced

—
Reply to this email directly or view it on GitHub
https://github.com/ampedandwired/html-webpack-plugin/issues/104#issuecomment-179683240
.

ghost on 4 Feb 2016

We got projects where we want to ship the "complete prototype" in one file to the customer. So I guess there are use cases for inlining assets :)

jantimon on 4 Feb 2016

It's simple and good optimization to inline assets. Check Google Plus code, their first page has everything inlined for its view. Other not important resources are requested later. So yeah, it's good to have.

NekR on 4 Feb 2016

@jantimon IMHO, since all people want is templating to inject inline scripts and styles to html, is it possible to add a configuration option inject: inline to make it happen, instead of yourutils.getAssetSource() and manually adding the <script><%= ... %></script> ?

holymonson on 23 Feb 2016

@holymonson I am not sure if "all people" really need inject. The html-webpack-plugin offers a hook for third party plugins.. Maybe this could also be solved by a inline plugin.

jantimon on 24 Feb 2016

Seems like a non-issue. Just saying.
On Tue, Feb 23, 2016 at 6:37 PM Jan Nicklas [email protected]
wrote:

@holymonson https://github.com/holymonson I am not sure if "all people"
really need inject. The html-webpack-plugin offers a hook for third party
plugins.. Maybe this could also be solved by a inline plugin.

—
Reply to this email directly or view it on GitHub
https://github.com/ampedandwired/html-webpack-plugin/issues/104#issuecomment-187988603
.

ghost on 24 Feb 2016

Seems like a non-issue

Sorry, but i have to disagree.

It would be pretty useful for multiple things: global error handling, legacy browser warnings or above-the-fold css.

These are no edge-cases. As an example see the html source of https://soundcloud.com . They're using webpack and it looks like they're inlining their code for exactly these use cases.

pulse00 on 26 Feb 2016

Let's agree to disagree. I've looked at a number of React starter kits and the only ones I've seen properly handle inlining of assets are those that skip this plug-in and build their own Html component. React Starter Kit is a good example of this. If you haven't actually cloned it to see how it works in the browser I think you'll be surprised. (Note: Isomorphism required - a good thing for speed, UX and SEO.)

ghost on 26 Feb 2016

skip this plug-in and build their own Html component

yeah, i guess there's always the possibility to use the plugin structure of this project to get this working somehow. Thanks for pointing to the react-starter-kit.

Server-Side rendering unfortunately currently isn't an option for us, but i agree it's an alternative solution to the above mentioned issues.

pulse00 on 26 Feb 2016

I think many people will need the support of getting original file content in template file. For example, if I want to write a demo generation tools, I really need showing the original code when I see how it runs.

@QiV good idea, but the code you get by fs.readFileSync() will not update when you change the file unless making a restart

jaredleechn on 10 Mar 2016

👍1

I am attempting to use the plugin to generate a small iFrame loaded page, which requires the related html to be inlined for portability. While it is mainly an edge case, it would be useful non-the less.

sirwolfgang on 22 Mar 2016

There is actually a hiding issue with, at the very least, @QiV 's solution. The version of the script that is loaded into the file is one version older then the version that is being compiled at that moment. The plugin doesn't seem to wait until the new versions of the scripts are written to run, so the version of the files loaded are stale. This works with the filename inclusion, but not with inlining.

sirwolfgang on 22 Mar 2016

If you use separate web-server(nginx), you could use ssi feature. just <script><script> or <style></style> and provide inline.js file as separate webpack bundle or uglified source and it would be inlined.
My use case for inline js/css - is separate from main application boost logic. I dont have any reason to change it constantly.

QiV on 22 Mar 2016

fixed in v2.14.0
Example:

https://github.com/ampedandwired/html-webpack-plugin/tree/master/examples/inline

jantimon on 23 Mar 2016

👎3 👍2

here has a cool plugin can resolve this issue in simple way:
web-webpack-plugin
have a try.