Menu
How can I provide my custom index.html when using electron-webpack ?.
I am new to webpack, I managed to configure it with electron but I didn't have the webpack-dev-server watch my html file so I had to refresh every time I made a change, and this is why I tried electron-webpack.
884
To configure Webpack to bundle HTML we'll use our first plugin, a dependency called HtmlWebpackPlugin. Remember, loaders offer functionality to files before Webpack bundles them, whereas plugins modify the entire bundle itself.
The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation.
The html-loader will parse the URLs, require the images and everything you expect. The extract loader will parse the javascript back into a proper html file, ensuring images are required and point to proper path, and the asset modules will write the .html file for you. Example: webpack.config.js module.
Unlike setting up a Webpack project from scratch, electron-webpack comes with a pre-configured Webpack and Babel configuration. It uses @babel/preset-env package to transpile JavaScript for the suitable version of your Electron installation. It also enables HMR for both main and renderer process by default.
First Welcome to Wonderfully Terrible World of Webpack! A powerful tool with a steep learning curve.
Basically any time you want to do anything non-standard (standard being simply bundling JS code together) you're going to need either a plugin or a loader.
For this problem you are trying to make a custom HTML file that webpack is aware of. html-webpack-plugin is going to be the plugin of choice. And adding it to your config file is really simple. If you provide your config I can help you with that or feel free to check out this great resource which will give you a run down of webpack, starting with easy material and getting more complicated as you go. The link below will take you to starting with html-webpack-config.
https://survivejs.com/webpack/developing/getting-started/#setting-up-webpack-configuration
62
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
