Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

I want to import files in different locations， how to use inject ??? #624

Closed
zhe-he opened this issue Mar 23, 2017 · 11 comments
Closed

I want to import files in different locations， how to use inject ??? #624

zhe-he opened this issue Mar 23, 2017 · 11 comments

Comments

@zhe-he
Copy link

zhe-he commented Mar 23, 2017 •
edited
Loading 

new HtmlWebpackPlugin({
		filename: 'dist/index.html',
		template: 'src/index.html',
		inject: "body",
		chunks: ['common','index']
	});

it will be:

<head></head>
<body>
    <script src="common.js"></script>
    <script src="index.js"></script>
</body>

How to use inject can be as follows ->

<head>
    <script src="common.js"></script>
</head>
<body>
    <script src="index.js"></script>
</body>
@Squidies
Copy link

+1

@mastilver
Copy link
Collaborator

Did you try by using a custom template?

@Squidies
Copy link

Squidies commented Mar 27, 2017 •
edited
Loading

@mastilver

For my purposes, I found an alternative for what I wanted to accomplish, but to your comment; I'm using pug-loader for my templating. I saw the section for adding template section for .ejs files, but couldn't find anything on implementing these with other templating loaders. Is the syntax the same regardless of the templating engine used?

(apologies if im high jacking this thread. i just happened to be looking for this exact question nearly the same time OP posted it)

@mastilver
Copy link
Collaborator

@Squidies Looks there: https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md

As long as you have the pug loader setup and you are using the right extension, it should work

@Squidies Make sure to share your result, so you can help @zhe-he in the meantime ;)

@zhe-he
Copy link
Author

zhe-he commented Mar 28, 2017

To be honest, I have not used a custom template.
So, maybe, if you have a solution to the method, can you give me an example, not very grateful.
@Squidies

@Squidies
Copy link

Thanks @mastilver, I'd taken a look at that, but could only find examples for .ejs files with <%= htmlWebpackPlugin.options.title %> as an example. I wasn't sure if this syntax would also work with pug-loader

Unfortunately I don't think my specific situation will apply. For my situation I was trying to load a custom build for modernizr, but ended up using the modernizr-webpack-plugin for my needs.

@zhe-he, check out the link @mastilver provided along with

https://github.com/jantimon/html-webpack-plugin/tree/master/examples/custom-template

In particular the template.html file. That might be a way to accomplish what you're trying to do.

@zhe-he
Copy link
Author

zhe-he commented Mar 29, 2017

@Squidies I may have seen the fake example, it can not help me.
I only need to be in the template page header and body custom insert javascript. There is no variable inside the template. /cry.

@jantimon
Copy link
Owner

jantimon commented Apr 3, 2017

It won't work with inject - you would have to write a real template.
There are variables available to achieve that

@jantimon jantimon closed this as completed Apr 3, 2017
@mikegrima
Copy link

@jantimon Can you provide an example of a template that would do this?

I have the same use case, where I want to have one bundle located in <head>, and another located in <body>. I mostly want to leverage the cache-busting capability.

FWIW: I am also not able to get the Title example working. The rendered HTML shows: <title><%= htmlWebpackPlugin.options.title %></title>.

@mastilver mastilver mentioned this issue May 10, 2017
Closed
@DmitryGonchar
Copy link

DmitryGonchar commented Dec 6, 2017 •
edited
Loading

@jantimon

There are variables available to achieve that

How to get/provide bundle file name with hash in these variables? From what I know, it is available only after webpack compilation. The closest solution I found is this one.

But writing your own plugin seems to be an overkill. Imho, it would be much better that such option existed in this plugin. You use compilation.getStats() anyway, so why not just put some into the if such option (headChunks: ['chunkName'] ) is provided?

@lock
Copy link

lock bot commented May 31, 2018

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.

@lock lock bot locked as resolved and limited conversation to collaborators May 31, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@DmitryGonchar @mastilver @jantimon @Squidies @mikegrima @zhe-he