jantimon/html-webpack-plugin

jQuery and multiple HTML pages in Electron Forge webpack-template

V-Krause opened this issue · 1 comments

V-Krause commented

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:

  1. How do I define jQuery in webpack so that it recognizes the functions?
  2. 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!

alexander-akait commented

Sorry, not related to html-webpack-plugin, please read https://webpack.js.org/plugins/provide-plugin/#usage-jquery, feel free to feedback