jQuery and multiple HTML pages in Electron Forge webpack-template #15419

V-Krause · 2022-02-19T15:55:29Z

V-Krause
Feb 19, 2022

I have created with the help of the webpack template from Electron Forge the basis for a project that works with webpack. However, I now have the problem that apparently the jQuery script is added to the HTML pages, but the individual commands are not recognized. My goal is to start from the index.html and from there, by swapping the main container, load my other HTML pages.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script>
      $('#page_log').load('./log.html');
      $('#page_wizard').load('./wizard.html').hide();
      $('#page_log').show();
    </script>

  </head>
  <body style="text-align: center;height: 100%;">
    <div>
      <div id="page_log"        class="main-container"></div>
      <div id="page_wizard"     class="main-container" style="display: none;"></div>
  </body>
</html>

webpack.main.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  
  mode: 'development',
  entry: {
    main: path.resolve(__dirname, './src/main.js'),
  },
  module: {
    rules: require('./webpack.rules'),
  },

  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, './src/index.html'),
    }),
    new HtmlWebpackPlugin({
      filename: 'log.html',
      template: path.resolve(__dirname, './src/log.html')
    }),
    new HtmlWebpackPlugin({
      filename: 'wizard.html',
      template: path.resolve(__dirname, './src/wizard.html')
    }),
  ],
};

So my questions now would be:

How do I define jQuery in webpack so that it recognizes the functions?
How do I correctly add multiple pages in webpack and make them load using the index.html ?
Here is my full project code (without the node_modules) so far: https://github.com/V-Krause/NewtonElectronWebpack

Thanks in advance!

vankop · 2022-02-19T16:09:47Z

vankop
Feb 19, 2022
Collaborator

If I understand your problem well, you can use jquery from cdn and set it as external in webpack.

0 replies

V-Krause · 2022-02-20T11:06:13Z

V-Krause
Feb 20, 2022
Author

Thanks for the quick reply!
I have now inserted the current script into my index.html via the jquery cdn page, as well as set external in the webpack.config.

However, the javascript still does not work in the HTML. By itself it should show the log.html and if I then click on the login button, an alert should be triggered, the console should log something and it should switch to the wizard page.

Could this be because the pages are not loading properly in webpack or is there still a bug in the code?
I also read something earlier about chunks in relation to the HtmlWebpackPlugin. Do you need these to load the pages correctly or what is the best way to do this?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <!-- <script src="../node_modules/jquery/dist/jquery.min.js"></script> -->
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script>
      $('#page_log').load('./log.html');
      $('#page_wizard').load('./wizard.html').hide();
      $('#page_log').show();
    </script>

  </head>
  <body style="text-align: center;height: 100%;">
    <div>
      <div id="page_log"        class="main-container"></div>
      <div id="page_wizard"     class="main-container" style="display: none;"></div>
  </body>
</html>

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  
  mode: 'development',
  entry: {
    main: path.resolve(__dirname, './src/main.js'),
  },
  externals: {
    jquery: 'jQuery',
  },
  module: {
    rules: require('./webpack.rules'),
  },

  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, './src/index.html'),
    }),
    new HtmlWebpackPlugin({
      filename: 'log.html',
      template: path.resolve(__dirname, './src/log.html')
    }),
    new HtmlWebpackPlugin({
      filename: 'wizard.html',
      template: path.resolve(__dirname, './src/wizard.html')
    }),
  ],
};

0 replies

vankop · 2022-02-20T15:34:48Z

vankop
Feb 20, 2022
Collaborator

not sure what you are trying to achieve...
this code:

<script>
      $('#page_log').load('./log.html');
      $('#page_wizard').load('./wizard.html').hide();
      $('#page_log').show();
    </script>

is not handled by webpack, see example https://webpack.js.org/configuration/externals/#externals

1 reply

V-Krause Feb 22, 2022
Author

Maybe I'll try to explain it again.
I first coded a program that ran with electron without problems and now I want to transfer it to webpack. My result should be an .exe. To achieve this I wanted to use Electron Forge, but probably only webpack should do it.
My log.html should be a login window, which leads to the wizard.html by pressing the login button. In my code without webpack I created an index.html, which first loads all the html files and then shows the log.html into the created main-container by $('#page_log').show();. By pressing the login button, the log.html first hides everything using $('.main-container').hide(); and then finally loads the wizard.html.
So my question now is, can I get this javascript code to run or do I need to code the navigation differently?

V-Krause · 2022-03-02T09:59:54Z

V-Krause
Mar 2, 2022
Author

To maybe help others further:
I have now solved the problem by putting the script part of the index.html outside the html tags. This way the jQuery part and the navigation works as well.
The error before was probably that, if the script part is inside the html tag it is not loaded correctly.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="./navigation.js"></script>    
  </head>
  <body style="text-align: center;height: 100%;">
    <div>
      <div id="page_log"        class="main-container"></div>
      <div id="page_wizard"     class="main-container" style="display: none;"></div>
    </div>
  </body>
</html>
<script>

  if (typeof jQuery != 'undefined') {  
      // jQuery is loaded => print the version
      alert($.fn.jquery);
  }

  $('#page_log').load('./log.html');
  $('#page_wizard').load('./wizard.html').hide();
  $('#page_log').show();
</script>

webpack.main.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  
  mode: 'development',
  entry: {
    main: path.resolve(__dirname, './src/main.js'),
  },
  module: {
    rules: require('./webpack.rules'),
  },

  plugins: [
    // new webpack.ProvidePlugin({
    //   $: require.resolve('jquery'),
    //   jQuery: require.resolve('jquery')
    // }),
    new HtmlWebpackPlugin({
      inject: 'head',
      filename: 'index.html',
      template: path.resolve(__dirname, './src/index.html'),
      minify: {
        removeComments: true,
        collapseWhitespace: true
      }
    }),
    new HtmlWebpackPlugin({
      filename: 'log.html',
      template: path.resolve(__dirname, './src/log.html'),
      minify: {
        removeComments: true,
        collapseWhitespace: true
      }
    }),
  ],
};

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

webpack

jQuery and multiple HTML pages in Electron Forge webpack-template #15419

Uh oh!

{{title}}

Uh oh!

Replies: 4 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

webpack

jQuery and multiple HTML pages in Electron Forge webpack-template #15419

Uh oh!

V-Krause Feb 19, 2022

Replies: 4 comments · 1 reply

Uh oh!

Uh oh!

vankop Feb 19, 2022 Collaborator

Uh oh!

V-Krause Feb 20, 2022 Author

Uh oh!

vankop Feb 20, 2022 Collaborator

Uh oh!

V-Krause Feb 22, 2022 Author

Uh oh!

V-Krause Mar 2, 2022 Author

V-Krause
Feb 19, 2022

Replies: 4 comments 1 reply

vankop
Feb 19, 2022
Collaborator

V-Krause
Feb 20, 2022
Author

vankop
Feb 20, 2022
Collaborator

V-Krause Feb 22, 2022
Author

V-Krause
Mar 2, 2022
Author