How to make webpack bundle js directly in script tag, not via src

Question

My webpack.config.js file now is:

const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = (env, argv) => ({
    mode: argv.mode === 'production' ? 'production' : 'development',

    // This is necessary because Figma's 'eval' works differently than normal eval
    devtool: argv.mode === 'production' ? false : 'inline-source-map',

    entry: {
        ui: './src/ui.js', // The entry point for your UI code
        code: './src/code.js', // The entry point for your plugin code
    },

    output: {
        clean: true,
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'), // Compile into a folder called "dist"
    },

    // Tells Webpack to generate "ui.html" and to inline "ui.ts" into it
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/ui.html',
            filename: 'ui.html',
            inlineSource: '.(js)$',
            chunks: ['ui'],
        })
    ],
})

and one of the file it complies is:

ui.html: (this is a target file for the current question)

<head>
    <script defer="defer" src="ui.js"></script>
</head>
<h2>Figma auto layout</h2><p>Count: <input id="count" value="5"></p>
<button id="create">Create</button>
<button id="cancel">Cancel</button><br>
<button id="create-structure">Create structure</button>

I want ui.html to bundle resulting html file like this:

<h2>Figma auto layout</h2><p>Count: <input id="count" value="5"></p>
<button id="create">Create</button>
<button id="cancel">Cancel</button><br>
<button id="create-structure">Create structure</button>
++ <script>
++     // here is js code from ui.js
++ </script>

How could I make webpack compile this way?

EDIT 1

If I use

plugins: [
    new HtmlWebpackPlugin({
        template: './src/ui.html',
        filename: 'ui.html',
        inlineSource: '.(js)$',
        chunks: ['ui'],
    }),
    new HtmlWebpackInlineSourcePlugin()
]

it returns me an error (I have this plugin already installed)

[webpack-cli] TypeError: Cannot read property 'getHooks' of undefined

I know that it requires webpack 5. My webpack version is ``--webpack@5.33.2`

Any alternatives for html-webpack-inline-source-plugin?

In order to use the `inlineSource` option on `html-webpack-plugin`, you need to install the `html-webpack-inline-source-plugin` (see [here](https://github.com/DustinJackson/html-webpack-inline-source-plugin)). — superhawk610, May 13 '21 at 16:59
See https://stackoverflow.com/questions/39555511/inline-javascript-and-css-with-webpack and https://stackoverflow.com/questions/64206486/how-to-use-webpack-to-inline-css-and-js-into-html-and-remove-unused-styles — SuperStormer, May 13 '21 at 16:59

score 2 · Answer 1 · answered Jan 26 '22 at 15:53

Here's two solutions I found after facing a similar problem:

You can use the InlineChunkHtmlPlugin from react-dev-utils, the advantage being that it's plug-and-play... for the most part! In my case, the script I was injecting contained a </script>, which broke the page. You can control where the script will be emitted (head, body, etc.) by modifying the inject property of the HtmlWebpackPlugin

For more info, have a read here

You can inject the script (s) using an HTML template, which you can provide to HtmlWebpackPlugin. For example, this template inlines all JS and CSS assets into the webpage:

doctype html
html
  head
    meta(charset="utf-8")
    title #{htmlWebpackPlugin.options.title}
  body
    each cssFile in htmlWebpackPlugin.files.css
      style !{compilation.assets[cssFile.substr(htmlWebpackPlugin.files.publicPath.length)].source()}
    each jsFile in htmlWebpackPlugin.files.js
      script !{compilation.assets[jsFile.substr(htmlWebpackPlugin.files.publicPath.length)].source()}

For more info, have a read here

score 0 · Answer 2 · answered May 14 '23 at 06:59

0

You can use InlineChunkHtmlPlugin from react-dev-utils

new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/.*/]);

answered May 14 '23 at 06:59

southxzx

19
2

How to make webpack bundle js directly in script tag, not via src

2 Answers2

Linked