Multiple scripts per entry point: best way to use their exported functions in HTML? #15929

TGRHavoc · 2022-06-08T12:14:50Z

TGRHavoc
Jun 8, 2022

I've been pulling my hair out for a while on this and I cannot seem to find the right keywords to use on Google to help me figure this out myself so, I'm turning to the collective minds of the webpack community on Github.

Anyways, I have three scripts. Script A has a window.addEventHandler("DOMContentLoaded") in it to do some stuff when the page has loaded (set up some events specific to the page, etc) and an exported function. Scripts B and C just export a function each.
Now, I can include each script on the page seperately and then I can call the exported functions from the HTML fine. But, I feel like this is the "wrong" way of doing this? I would expect that I would be able to add the scripts to a single entry point and use the exports that way but, it seems like only the last script's exported functions get added to the window. I've tried to mark the scripts with only function exports as "sideEffect" but, I still wasn't able to use the functions in HTML.

So is it better to define each script individually or, is there a way to group them together whilst still being able to use the functions from HTML?

Example of my use case:

I currently have something like this in my config

{
    mode: "production",
    // Uncomment line below for useful debugging hints
    devtool: "source-map",
    target: ["web", "es5"],
    entry: {
        "somePage/main-script": {
            import: [
                "./somePage/main.js"
            ]
        },
        "generic/scriptB": {
            import: "./generic/scriptB.js"
        },
        "generic/scriptC": {
            import: [
                "./generic/scriptC.js"
            ]
        },

   },
    output: {
        publicPath: "/dist/",
        // eslint-disable-next-line no-undef
        path: path.resolve(path.join(__dirname, "dist")),
        library: {
            //name: "[name]",
            type: "global"
        },
        clean: true,
    },
    optimization: {
        splitChunks: {
            chunks: "all",
        }
    },
    cache: {
        type: "filesystem",
        allowCollectingMemory: true,
    },
    module: {
        rules: [
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                //use: ["babel-loader"]
                use: {
                    loader: "babel-loader",
                    options: {
                        babelrc: false,
                        // eslint-disable-next-line no-undef
                        configFile: path.resolve(__dirname, "babel.config.js"),
                        compact: false,
                        cacheDirectory: true,
                        sourceMaps: true
                    },
                },
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin(),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            "jquery": "jquery"
        })
    ]
};

vankop · 2022-06-08T18:13:48Z

vankop
Jun 8, 2022
Collaborator

what you mean by scripts? You want to do something like:

<html>
  <script src="my-3-builded-scripts.js"></script>
  <script src="app.js"></script><!-- consume functions here -->
</html>

If so you need to output a library ( e.g. in example above you can use umd library https://webpack.js.org/guides/author-libraries/#expose-the-library )

Also you can use them in one entrypoint like:

entry: {
        "some-entry": {
            import: [
                "./somePage/main.js",
                "./generic/scriptB.js",
                "./generic/scriptC.js"
            ]
        },
   }

5 replies

TGRHavoc Jun 8, 2022
Author

Sorry, I don't think I was clear. I know that I can include them in the HTML and add them all under a single entry point but my issue is that I cannot call scriptB's exported function from the HTML (it says it doesn't exist) but I can call scriptC's.
I did think about exporting it as a library instead of "global" however, I'm adding webpack to a large codebase and re-writing all the function calls to include myLibrary. everywhere doesn't seem like it would be plausable.
I thought that making the libary type "global" and exporting functions would expose all said functions automatically but, it seems like it only exposes some. If that makes any sense?

TGRHavoc Jun 8, 2022
Author

If it helps I have a small repo that reproduces my issue:
https://github.com/TGRHavoc/webpack-mvp

Note: Making it a umd library has no effect (made it a library with the name "lib" and it only had the last exported function).

vankop Jun 9, 2022
Collaborator

ok, I see. It will work only with reexport in index:

export function indexMethod(){
    $(".content").append("<h4>Hello from index.js</h4>");
}

export { scriptA } from "./scriptB";
export { scriptC } from "./scriptC";

window.addEventListener("DOMContentLoaded", function(){
    $("body h2").text("Woop, we've loaded");
});

vankop Jun 9, 2022
Collaborator

regarding grouping entry modules #15936

TGRHavoc Jun 9, 2022
Author

ok, I see. It will work only with reexport in index:

export function indexMethod(){
    $(".content").append("<h4>Hello from index.js</h4>");
}

export { scriptA } from "./scriptB";
export { scriptC } from "./scriptC";

window.addEventListener("DOMContentLoaded", function(){
    $("body h2").text("Woop, we've loaded");
});

regarding grouping entry modules #15936

Aha. Okay, thanks for the help. I'll reexport the functions in the meantime :)

webpack

Multiple scripts per entry point: best way to use their exported functions in HTML? #15929

Uh oh!

Uh oh!

TGRHavoc Jun 8, 2022

Replies: 1 comment · 5 replies

Uh oh!

Uh oh!

vankop Jun 8, 2022 Collaborator

Uh oh!

TGRHavoc Jun 8, 2022 Author

Uh oh!

Uh oh!

TGRHavoc Jun 8, 2022 Author

Uh oh!

vankop Jun 9, 2022 Collaborator

Uh oh!

vankop Jun 9, 2022 Collaborator

Uh oh!

TGRHavoc Jun 9, 2022 Author

TGRHavoc
Jun 8, 2022

Replies: 1 comment 5 replies

vankop
Jun 8, 2022
Collaborator

TGRHavoc Jun 8, 2022
Author

TGRHavoc Jun 8, 2022
Author

vankop Jun 9, 2022
Collaborator

vankop Jun 9, 2022
Collaborator

TGRHavoc Jun 9, 2022
Author