I am using HtmlWebpackPlugin to inject javascript into my template file:
<html>
...
<body>
...
<?php echo $this->inlineScript(); ?>
<script type="text/javascript" src="/dist/vendor.js?a4212b4b10c2d4d2d73e"></script>
</body>
</html>
However, I need the generated bundle to be injected before the PHP code <?php echo $this->inlineScript(); ?>, to let inline scripts work properly (they require JQuery, which will be loaded inside vendor.js).
Result should be:
<html>
...
<body>
...
<script type="text/javascript" src="/dist/vendor.js?a4212b4b10c2d4d2d73e"></script>
<?php echo $this->inlineScript(); ?>
</body>
</html>
Is there a way to achieve this? Maybe it is possible to use a placeholder like <%= htmlWebpackPlugin.options.??? %> or something similar? If it does not work with HtmlWebpackPlugin, is there another webpack plugin I can use?
I am using HtmlWebpackPlugin to inject javascript into my template file:
<html>
...
<body>
...
<?php echo $this->inlineScript(); ?>
<script type="text/javascript" src="/dist/vendor.js?a4212b4b10c2d4d2d73e"></script>
</body>
</html>
However, I need the generated bundle to be injected before the PHP code <?php echo $this->inlineScript(); ?>, to let inline scripts work properly (they require JQuery, which will be loaded inside vendor.js).
Result should be:
<html>
...
<body>
...
<script type="text/javascript" src="/dist/vendor.js?a4212b4b10c2d4d2d73e"></script>
<?php echo $this->inlineScript(); ?>
</body>
</html>
Is there a way to achieve this? Maybe it is possible to use a placeholder like <%= htmlWebpackPlugin.options.??? %> or something similar? If it does not work with HtmlWebpackPlugin, is there another webpack plugin I can use?
3 Answers
Reset to default 12Ok I figured it out. Put the following code where you want to include your js files:
<% for(var i=0; i < htmlWebpackPlugin.files.js.length; i++) {%>
<script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[i] %>"></script>
<% } %>
and set inject in HtmlWebpackPlugin options to false.
Keep in mind that you need to inject other stuff (css, meta tags, etc.) by hand, too. F.e. CSS:
<% for(var i=0; i < htmlWebpackPlugin.files.css.length; i++) {%>
<link type="text/css" rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[i] %>">
<% } %>
To fix this problem I did the following:
(1) install the HtmlWebpackPlugin (https://www.npmjs./package/html-webpack-plugin)
npm i html-webpack-plugin
(2) update my webpack config
module.exports = {
// ...
plugins: [
// ...
new HtmlWebpackPlugin({
template: 'template.html',
filename: 'file.html',
inject: false,
minify: false,
templateParameters: (pilation, assets) => {
const css = assets.css.map((filePath) => `<link rel="stylesheet" href="${filePath}" />`).join("\n");
const js = assets.js.map((filePath) => `<script src="${filePath}"></script>`).join("\n");
return { css, js };
},
}),
}),
// ...
],};
(3) add these tags within my template. This will tell webpack where to place the CSS and JS files.
<!-- Webpack CSS -->
<%= css %>
<!-- Webpack JS -->
<%= js %>
Not sure if I am too late, but you can use script-ext-html-webpack-plugin. This can set the script as defer which can defer the execution until the DOM is parsed. Additionally you can inject this script in head of html to start fetching it in parallel but executing at the end :
plugins: [
new HtmlWebpackPlugin({ template: 'template.ejs', inject: 'head'}),
new ScriptExtHtmlWebpackPlugin({ defaultAttribute: 'defer' }),
]