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?

Answer 1

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

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

Question

1 answers

solution1
1 2022-01-26 15:53:06

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

Question

1 answers

solution1 1 2022-01-26 15:53:06

solution1
1 2022-01-26 15:53:06