Comments (15)
There is a bug in cache
for html-webpack-plugin, that is why we disable it, I am working on the new major release without this bug, cache will work without extra setup in future and without bugs
from html-webpack-plugin.
Yeah( I am still working on it, anyway HTML generation is fast, so just check it out
from html-webpack-plugin.
You should not run:
setInterval(() => {
compiler.compile()
}, 60000)
it is bad for perf
from html-webpack-plugin.
Sorry I don't undestand what do you try to do
from html-webpack-plugin.
i'm trying to get data from server and inject into html, like this
const res = await axios.get('xxx.com/xxxxx')
data.html += res.data
on dev mode, i want to use timer to check whether data from server changed and regenerate html if changed
from html-webpack-plugin.
Please use HtmlWebpackPlugin.getHooks(compilation).beforeEmit
right now (getCompilationHooks
is not released), I don't recommend to run compiler.compile
using times, you can send a HEAD
request and check it is 304
code or not, and only when somethings changed re-run compilation
from html-webpack-plugin.
how to re-run compilation, do u mean npm run dev
again?
from html-webpack-plugin.
@robotsmeagol to rerun compilation I recommend to make compiler.watching.invalidate()
, note compiler.watching
is not undefined only when you watch
from html-webpack-plugin.
i tried compiler.watching.invalidate()
, but only first time this would works, after that html won't regenerate
from html-webpack-plugin.
What do you mean won't regenerate?
from html-webpack-plugin.
U can check on this demo
in config/Myplugin.js, i inject customData to html
customData is always 100 and never changed
from html-webpack-plugin.
Solution:
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
class MyPlugin {
constructor() {
this.pathToData = path.resolve(__dirname, "./my-data.json");
}
apply(compiler) {
compiler.hooks.thisCompilation.tap("MyPlugin", (compilation) => {
HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
"MyPlugin",
(data, cb) => {
let content;
try {
content = compilation.inputFileSystem.readFileSync(this.pathToData, "utf8");
} catch (error) {
cb(error);
return;
}
content = JSON.parse(content);
compilation.fileDependencies.add(this.pathToData);
data.html = data.html.replace(
"</head>",
`<script>window.customData=${JSON.stringify(content.value)}</script></head>`,
);
cb(null, data);
},
);
});
}
}
module.exports = MyPlugin;
File:
my-data.json
{
"value": "11244123"
}
Add:
{
watchFiles: [require("path").resolve(__dirname, "my-data.json")],
// Other options
}
to config/webpackDevServer.config.js
And disable cache for HtmlWebpackPlugin
new HtmlWebpackPlugin(
Object.assign(
{},
{
cache: false,
inject: true,
template: paths.appHtml,
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined,
),
),
i.e. cache: false
, so webpack will automatically reload page and apply new data
from html-webpack-plugin.
Hi @alexander-akait , has the issue about the cache
been fixed right now? And I have an addition question: if we change the cache
to false
, doesn't it mean that the HTML file will be regenerated so long as you make changes to your source code no matter what files you are touching, is that right?
from html-webpack-plugin.
The HTML can be generated fast, but it causes the dev server to reload the whole page, HMR won't work in that case, right? So in a large project, the impact is significant
from html-webpack-plugin.
The HTML can be generated fast, but it causes the dev server to reload the whole page, HMR won't work in that case, right? So in a large project, the impact is significant
HTML should be generated only when you make changes in HTML files, but I don't you did it often
from html-webpack-plugin.
Related Issues (20)
- Writing Your Own Templates section does not work HOT 2
- ```[tasklist] ### My tasks - [ ] https://github.com/octo-org/octo-repo/issues/45 - [ ] Draft task ```
- Embed the script into HTML HOT 4
- Add a link rel=prefetch for a css chunks created within your wepbackPrefetch lazy loaded js chunks HOT 2
- Watch mode memory leak when saving HTML template HOT 1
- multi-page behavior illogical? HOT 1
- Memory leak in watch mode due to unique child compiler IDs HOT 1
- New version 5.6.0 introduce breaking changes to the plugin interface HOT 3
- CSS order not correct when using split chunks HOT 2
- File does not render correctly / cannot get variable from options HOT 3
- Allow plugin to run during a custom stage, or change default HOT 3
- Allow the plugin to support loaders that don't resolve to a single function HOT 2
- TypeError: childCompilation.errors.map is not a function HOT 1
- Ver. 5.6.0: Reference to htmlWebpackPlugin.options.filename in template contains "[name]" instead of actual file name HOT 7
- How to use alias in <%= require('html-loader!./partial.html').default %>? HOT 1
- How to add `onerror` event to the generated script tag? HOT 1
- remove inline script from index.html HOT 1
- Sometimes index.html is not packaged into the dist directory,about 1/3 probability or 1/4 probability HOT 2
- html-webpack-plugin Sometimes my template file index.html is not packaged into the dist directory, with a probability of 1/4 or 1/3, meaning it doesn't happen every time HOT 6
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 html-webpack-plugin.