-
-
Notifications
You must be signed in to change notification settings - Fork 375
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.
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
How to build preact in one index.html file? #923
Comments
What's the error message your getting? |
Try replacing your preact.config.js with this: export default (config, env, helpers) => {
config.optimization.splitChunks.minChunks = 1;
} |
Should this issue be migrated to the |
Hey @braga96 did you end up making any progress with this? I am in the exact situation using a microcontroller, and am also interested in condensing the build files into a single html file |
I made this but it was not so easy as a one liner https://gist.github.com/sebasjm/087df4b0b0a611ce409fe30a67a1d0d9 Any improvement would be greatly appreciated. |
Any solution yet? @sebasjm's solution doesnt look like a good way of doing this |
I just need to inline scripts and styles, nothing more than that |
Tried to use import HtmlWebpackPlugin from "html-webpack-plugin";
import InlineChunkHtmlPlugin from "react-dev-utils/InlineChunkHtmlPlugin";
export default (config, env, helpers) => {
config.plugins.push(
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/.+[.]js/])
);
} Build goes:
|
So jantimon/html-webpack-plugin#1068 says 'getHooks is new in html-webpack-plugin 4.0.0.alpha-2' and you have "html-webpack-plugin": "^3.2.0", and I mentioned is #1629 that you can't install another version What should I do? |
@caxapexac You installed the latest version of Is there anything about the above solution that makes you think it is a poor way of going about this (assuming it works as you'd like it to)? |
@rschristian it uses grep, I use windows |
Nothing strange about a post-build script, and I'd argue that is the correct way to go about this. Way less fragile than depending on Webpack plugins, that depend on specific versions of other dependencies, Webpack features, and our configuration. You could swap grep and sed out for a Node script, |
html-webpack-inline-source-plugin@1.0.0-beta.2 doesn't work either cuz of html-webpack-plugin (https://stackoverflow.com/a/60473584/9398364) html-webpack-inline-source-plugin ^0.0.10 doesn't work cuz its for webpack4 |
We are using Webpack 4 |
@rschristian its just so essential task (bundling 3 files into 1 file) so writing regexp with string replace looks like writing array sorting by hand, whats wrong if I want to write 1 string inside webpack config instead of remembering sick syntax of regexp? |
Ouf this is building with "html-webpack-inline-source-plugin": "^0.0.10",:
|
Nothing's wrong with with that, but the fact of the matter is that you have a lot more moving pieces with Webpack plugins. As you've already encountered, you have a reliance upon not only your plugin version, but This likely isn't something we're looking to support out-of-the-box, as it's quite a bad practice if you can avoid it, so you'll need to do a bit of stitching things together if you cannot find a webpack plugin that'll work with our current dependencies. There is #1608 in the pipeline which will upgrade us to |
Okay I've re-read #923 (comment) and it seems legit, sorry for all this stuff Ive said. So if I use this solution, to what should I replace 'something.woff' and 'base64-inline-loader' on the 15-20th line to not to break everything and have truly single-file bundle (I can have js, css, png, svg in the project)? (it is good to inline js as base64? How to inline as plain text?) |
@rschristian my pipeline is updated and now its legit to use multiple files in build. Whats the best command for build then? I use preact for rendering game overlay gui so no need for prerendering and other stuff: I suupose its I.e. css dedupe (#1631) - I can't fully disable inlined css cuz its needed for loading screen The aim is to having folder: P.S. is there anything wrong making game interface with react? Honestly I don't know, is there other legit solutions? (I've seen vue used for game ui only) |
Disabling prerendering would mean very little CSS could be inlined. Critters needs to be able to detect what styles you use in order to inline those CSS rules. If you don't prerender, you're handing Critters an empty doc; it will only end up inlining generic rules for |
@rschristian its okay about css and prerender, got it, thanks. What about 3-files build? There are still files I'd like to get rid off, is it possible?: I mean: |
You can just run a post-build delete script for anything you don't want. I doubt you want the manifest. |
Oh I see, push manifest feels much useful now, thanks |
Sorry, |
What kinds of pwa stuff had I disabled? I really need manifest.json so I thought service worker is optional for it |
There's no hard requirement, though it'd be quite odd. |
Going to close out, this will never be supported out-of-the-box. Users can configure via |
Hey. I use preact to create interactive pages that are hosted in the memory of the microcontroller. The preact size and features are really impressive, but for my use case it is still overloaded.
What can I do so that when I run the npm run build command, I get 1 file - index.html, where will all the styles and scripts be inside?
I used to have a working version, but when updating webpack and preact, it turned out to be not working:
package.json
"build": "preact build --no-prerender --no-service-worker"
preact.config.js
Thanks!
The text was updated successfully, but these errors were encountered: