icelam/html-inline-script-webpack-plugin

How to link my js files to index.html

Closed this issue · 7 comments

kriptcs commented

Environment and package version

Webpack 5.0.0

Reproduction link / code sample

Hey! I have a project where I cannot have a separate js file but I can have a single html so I am looking to convert all my js inline.
What part of this code do I modify to link my script file "script.js" that is in the "script" folder of my project?
I just pasted this code from the readme and it did nothing, and understandably so.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'static/index.webos.html',
    }),
    new HtmlWebpackPlugin({
      filename: 'page2.html',
      template: 'page2.html',
    }),
    new HtmlInlineScriptPlugin({
      htmlMatchPattern: [/index.html$/],
    }),
  ],
};

Thank you in advance and apologies for the stupid question, I am fairly new to all this.

icelam commented

Hi @kriptcs,

No need to apologize! We all start somewhere, and there are no stupid questions when it comes to learning.

This plugin depends on Webpack, and you'll need to configure Webpack to use it. The configuration for Webpack can vary depending on your folder structure and the framework you're using. I recommend checking out the "Getting Started" guide by Webpack for detailed instructions.

Base on the sample Webpack configuration code you provided, it seems that entry and output properties is missing. Note that the entry property in the configuration specifies the entry point of your application, which is the file that Webpack will start bundling from. And the output property specifies the output directory and filename for the bundled files. Assuming you have the following folder structure:

src/
├─ index.js
├─ index.js
package.json

A minimal webpack config setup would look like:

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

const config = {
  entry: path.resolve(__dirname, './src/index.js'),
  output: {
    path: path.join(__dirname, './dist'),
    filename: '[name].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './src/index.html')
    }),
    new HtmlInlineScriptPlugin(),
  ]
};

export default config;

Let me know if you have any further questions!

kriptcs commented

So I am currently working with React Native and I am looking to essentially convert a web app with a lot of JS components into an app with inline JS that could easily be used through WebView.
To simplify matters and help me understand, I created a new web project that only has index.html and script.js.
I assume my entry would be script.js..what would be the output?
Also, where would this script be written? In a JS file or in the main HTML file with the <script> tag?

kriptcs commented

From what I seem to have gathered I am using webpack to bundle all my js files together, then using your plugin to transfer that one bundle js file into "inline JS" or JS that's on the .html file between <script> is that right?

icelam commented

I assume my entry would be script.js..what would be the output?

  • The output.path property specifies a temporary location where webpack puts its generated bundle. In your case, you may want to automate the process of moving the bundled files to your React Native repository.
  • The output.name determines the name of each output bundle. This is necessary because webpack generates the JavaScript into JS files before this plugin processes it for inlining.

Also, where would this script be written? In a JS file or in the main HTML file with the <script> tag?

  • The JS files that match the scriptMatchPattern option (or all files if not specified) will be made inline in the HTML template passed to the html-webpack-plugin. Depending on the inject options of the html-webpack-plugin, the script tag might be located inside the <head> or <body> tags.
kriptcs commented

Ok, I realized I was a bit more confused about webpack rather than this plugin in specific. I have no learned webpack bundling stand alone and I am back with some more plug-in specific questions.

  1. When running the plug-in, it looks like it creates another index.html but this time in the dist folder. I assume this is the index file with all the inline js. I am just curious though...should I delete the initial index.html file I created? How does a browser know which to default to/open?
  2. I assume that this plug-in will not fix the issue that I cannot really run getElementById functions since it's bundled js, unless?

Thank you for your support!

icelam commented

When running the plug-in, it looks like it creates another index.html but this time in the dist folder. I assume this is the index file with all the inline js. I am just curious though...should I delete the initial index.html file I created? How does a browser know which to default to/open?

Webpack is a tool which aims to streamline the process of bundling and managing web assets in modern web development workflows. It provides a powerful and flexible environment for building, optimizing, and organizing front-end resources such as JavaScript modules, CSS stylesheets, images, and more. Rather than directly modifying your source code, Webpack outputs the bundled assets into a separate directory, ensuring that your original files remain untouched.

In addition, it is important to note that you should refrain from deleting either the src/index.html file in your source code or the dist/index.html file generated by Webpack. This is because Webpack typically applies code minification to the bundles it generates, making it challenging to directly modify the bundled code. As a best practice, developers often opt to modify the original source code and subsequently run Webpack to bundle the code again whenever changes need to be applied.

To host your webpage, you will need to copy all the files located in the dist directory to the web storage location of your choice. The dist directory contains the bundled and optimized assets generated by Webpack, including the minified JavaScript, CSS, and other necessary files.

I assume that this plug-in will not fix the issue that I cannot really run getElementById functions since it's bundled js, unless?

Correct. This plugin does not alter or change any of the underlying logic in your codebase. Its purpose is solely to facilitate the process of inlining JavaScript code within HTML script tags.

SugarRayLua commented

Hi, @kriptcs,

I'm also a newbie to Node.js and am trying it out on mobile (iOS) using Node.js Lab app:

https://apps.apple.com/us/app/node-js-lab/id1550710789

Since many interesting apps (including games) are being distributed in the form of html packages but since those html packages cannot easily be run from the client side (due to the inability for client browsers to access local files-- unless one runs those packages using a local server), I've often manually inlined the packages javascript files so that they can be run locally on my or others mobile browsers without the need to setup a local server. However, for larger projects, manually cutting and pasting multiple separate .js files code inline to the .html file can be tedious and error prone, and thus I thought this npm package might be helpful to automate the process. I tried to follow the instructions you provided to the initial author if this thread but no new inlined .html files were produced and suspected I might be doing something wrong that I was hoping you could correct:

As noted in the attached screenshot from my mobile Node.js IDE, I have the following local file structure (currently shown with the /rpssl directory open):

root

  • webapp_demo
  • rpssl
    • sprites
    • fonts
    • index.htm
    • routine.js
    • process.js
    • ... *many additional .js files I wish to inline
  • assets
  • index.htm
  • inlineModule.js
  • app.js

Thus, I created 'inlineModule.js' based on the suggestions you provided the author of this thread and tried to run inlineModule.js directly hoping that it would create a new 'dist' directory under root and then parse all of the .js files in the rpssl directory and insert all of those .js files code inline into a newly created 'index.html' file under root. However, there was no output (no new files were created) when I ran inlineModule.js.

I appreciate any suggestions you might have.

Thanks!
IMG_1830