![]() Tracking solutions in this issue is also made more confusing by the webpack 4-> 5 migration. Why doesn't it work out of the box with the webpack plugin? Although webpack has historically been the most stable/configurable bundler option, that also comes with a trade-off: it requires additional configuration for most use-cases, including static HTML.įorge's webpack plugin provides a layer of abstraction to get Electron compatibility sorted out, but doesn't really provide info around setting up webpack beyond that (and I would argue that anything that isn't Electron-specific should belong in the webpack docs and not ours). Try it yourself by in Electron Fiddle or by cloning electron/electron-quick-start! It's the same as writing it for any web browser target. Bizarre.Īt its core, Electron supports static images in HTML just fine. Static image technology is many decades old. I'm flabbergasted that Electron is so popular but it can't just show images. BUT changing all your images references to the require version is cumbersome, so that's when you use the html-loader, it will do that automatically for you. So instead of in the html, you should write. The 'proper' way is to let webpack know about your image dependancies by 'requiring' the images. This person on StackOverflow explains it better than me, but the TL DR is that you want webpack to be aware of static assets (in this case, images) being referenced in your HTML. You need to add html-loader to the renderer webpack 166d854įrom there, I was able to get an image to load in dev and when packaged: I spent some time figuring out how to get images to show up in static HTML with webpack 5 and came up with a little repro to help you out. Running a server in production is the most reasonable way to make these the same.Īnd I just today saw a new ticket marking this as a bug #1591. This mismatch is the root of the problem everyone is having. There is not an explanation of why the development system runs from a server and the production one runs from a file other than I suppose that the dev serve gives reloading ability. I know there is an example of importing a CSS file into a JavaScript file but that it a unusable approach when you have thousands of large files to the point that the webpack dev server cannot even boot. This is something that should be simple but I've spent hours trying to figure it out. ![]() People are spending huge amounts of time on it. This is not the first ticket talking about this. Please implement some kind of recommendation or code sample in the docs for static file serving. Loading static files is a basic part of making web pages and should be a part of the project template. I've seen a solution expressed in these links but I could not get it to work in both development and production. on ( 'ready', createWindow ) Additional Information Some APIs can only be used after this event occurs. Let imageMap = // This method will be called when Electron has finished // initialization and is ready to create browser windows. ![]()
0 Comments
Leave a Reply. |