Comments (13)
Yes (you have a typo in the code, ibject
instead of inject
)
from webapp-webpack-plugin.
This feature doesn't exist yet, but does seem reasonable.
Now I wonder what's the best way to declare this relationship, any ideas?
from webapp-webpack-plugin.
I had some ideas:
- Define a 'key' config in HtmlWebpackPlugin, that you can later on use to filter/use in your plugin.
- Add an 'appliesTo' filter function that is run against all available HtmlWebpackPlugins, and then it is applied to all that matches that filter. Could be implemented by using Lodash filter function (https://lodash.com/docs/4.17.10#filter)
from webapp-webpack-plugin.
Adding arbitrary stuff to other plugins' config is bad practice. With that respect the second option seems better, but that would likely shift to the end user the responsibility of adding arbitrary keys in html-webpack-plugin
.
from webapp-webpack-plugin.
@brunocodutra that would be OK. A user could use "title" for example to filter things out or other properties up to them
from webapp-webpack-plugin.
from webapp-webpack-plugin.
I was trying to, but got lost in the webpack plugin world... It would take me considerable time to start figuring out, specially since now the whole plugin process has been "redone", it's hard to find out a good source of truth for all of it.
from webapp-webpack-plugin.
@luislobo sorry for the delay, I've been away for the past weeks.
This is the line you're looking for, there you have access to htmlPluginData.plugin.options
which you can pass on to the predicate that decides wether to inject meta tags.
Your proposal essentially extends the current behavior, which means you can simply default the custom predicate to htmlPluginOptions => htmlPluginOptions.inject && htmlPluginOptions.favicons !== false
in case it's not set by the user, thus keeping it backwards compatible, does that make sense?
from webapp-webpack-plugin.
@brunocodutra No problem about the delay, each one does this at their own pace :)
About what you mention, I knew about that behavior, but the problem/proposal here is a way to tell, in one single webpack config, that has two (or more) htmlPlugins, a webApp plugin to each one of them, so that there is a "relationship" between htmlPlugin1
(for example backend UI) and webApp1
(the backend webApp resources and config), and htmlPlugin2
with webApp2
. In our case, it's the same app, but they belong to two different verticals, thus, they have different CSS+icon pack.
from webapp-webpack-plugin.
@luislobo I was 100% sure I had answered, but alas I must have forgotten to send it.
What I was trying to say is that the behavior you describe may be implemented by extending the current logic that decides whether to inject html or not.
Essentially you could replace
const htmlPluginDataInject = htmlPluginData.plugin.options.inject && htmlPluginData.plugin.options.favicons !== false;
if ( htmlPluginDataInject || this.options.inject === 'force') {
// ...
}
by something like
const appliesToHtmlPlugin = this.options.appliesTo(htmlPluginData.plugin);
if (appliesToHtmlPlugin) {
// ...
}
where appliesTo
is a user provided predicate that, given a specific instance of HtmlWebpackPlugin
, decides whether to inject tags or not, for example
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new WebappWebpackPlugin({
logo: './src/logo.svg',
appliesTo: htmlPlugin => htmlPlugin.options.template === './src/index.html',
}),
],
If not set, appliesTo
could default to the current behavior
htmlPlugin => htmlPlugin.options.inject && htmlPlugin.options.inject.favicons !== false
Does that work for your use case?
from webapp-webpack-plugin.
A step further could even be to overload the already existing inject
option, which besides a boolean or the string 'force'
, could also take the predicate described above.
from webapp-webpack-plugin.
I'm totally fine with any of these approaches :)
from webapp-webpack-plugin.
To summarize the discussion so far, this feature request proposes the configuration below would be valid and result in two separate html
files, only one of which would have favicons injected as described by the predicate specified in inject
.
plugins: [
new HtmlWebpackPlugin({
template: 'a.html.tmpl',
filename: 'a.html',
}),
new HtmlWebpackPlugin({
template: 'b.html.tmpl',
filename: 'b.html',
}),
new WebappWebpackPlugin({
logo: 'logo.svg',
ibject: htmlPlugin => htmlPlugin.options.filename === 'a.html',
}),
],
from webapp-webpack-plugin.
Related Issues (20)
- allow outputted file name to include prefix HOT 1
- Cache hash should depend on Favicons version HOT 4
- Build fails when html-webpack-plugin is not installed HOT 1
- Convenient way to get generated html tags from js HOT 7
- Add hash as query string HOT 4
- Support xhtml flag HOT 3
- Apple - larger resolutions not being generated HOT 6
- Exclamation mark in `favicons` property value makes the build crash HOT 3
- Allow logo option to be an array HOT 1
- Make this work with mini-html-webpack-plugin? HOT 1
- Gray border around png shapes HOT 1
- favicon outside of assets folder HOT 7
- Please Delete HOT 2
- Multiple icons sources? HOT 6
- Update favicons dependency to v5.4.0 HOT 3
- Deprecated media attribute
- Add feature to configure filenames to append hash HOT 7
- Not inject to html HOT 14
- An in-range update of webpack is breaking the build 🚨 HOT 7
- Intermittent Error with sharp dep HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webapp-webpack-plugin.