Hello,
I'm currently migrating to Webpack 2 and encountering issues with html-webpack-plugin.
Do you know if/how I can define/pass custom variables for use within my template?
Here's an overview of my (currently broken) configuration:
Plugin:
new HtmlWebpackPlugin({
template: helpers.root("src/index.html"),
}),
In my index.html file, I could inject configuration this way:
<meta name="description" content="<%= webpackConfig.starkAppMetadata.description %>">
With Webpack 1 I could have this working because starkAppMetadata was defined in my webpack configuration, but with Webpack 2 they don't allow this anymore and I have to define the variables within the LoaderOptionsPlugin instead:
const commonConfig = require("./webpack.common.js"); // common configuration between environments
const commonData = require("./webpack.common-data.js"); // common configuration between environments
...
new LoaderOptionsPlugin({
options: {
...
starkAppMetadata: commonData.starkAppMetadata,
starkAppConfig: commonData.starkAppConfig,
...
},
Do you have an idea of how I could access those?
I believe that you should be able to still retrieve/expose those values within the "templateParams" object that you prepare in index.js before calling the templateFunction.
Try
new LoaderOptionsPlugin({
options: {
htmlWebpackPlugin: {
starkAppMetadata: commonData.starkAppMetadata,
}
}
}
@dsebastien use the env object.
A full initialization of this plugin I found on github
new HtmlWebpackPlugin({
filename: consts.INDEX_HTML,
title: 'RCN.io',
template: path.resolve(consts.SRC_DIR, 'client/index.html.ejs'), // Load a custom template
css: ['app.css'],
inject: false, // we use custom template to inject scripts,
hash: true,
env: {
Prod: true,
Dev: false
},
minify: { // Minifying it while it is parsed
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
},
})
@bondz I tried that approach but unfortunately it didn't work
It works by defining the plugin this way:
new HtmlWebpackPlugin({
template: helpers.root("src/index.html"),
...
metadata: METADATA,
starkAppMetadata: commonData.starkAppMetadata,
starkAppConfig: commonData.starkAppConfig,
}),
I would've liked to be able to use @bondz solution as that way I could've avoided some configuration duplication. Any idea why that doesn't work? Do loaders need to be modified to be able to retrieve options passed via the LoaderOptionsPlugin ?
@dsebastien I am not sure if this could work as the HtmlWebpackPlugin is not a loader but a plugin
@jantimon haha that's a good point :p
I guess you can consider this issue resolved, it just works now and I can work around the issue using other means too.
Thanks!
Hi all, I need to send some section of data to a partial of ejs.
<%
var data = htmlWebpackPlugin.options.data;
var carouselElement = data.carouselElement;
if (data) { %>
<%- include ../../components/avalon/header/header.ejs %>
above code doesn't work. Wondering if anyone know how to pass data using include?
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.
Most helpful comment
@bondz I tried that approach but unfortunately it didn't work
It works by defining the plugin this way:
I would've liked to be able to use @bondz solution as that way I could've avoided some configuration duplication. Any idea why that doesn't work? Do loaders need to be modified to be able to retrieve options passed via the LoaderOptionsPlugin ?