How to link my js files to index.html

[kriptcs]

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]

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]

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 Githubissues.

Githubissues is a development platform for aggregating issues.