javascript - How to export a function with Webpack and use it in an HTML page? - Stack Overflow

admin管理员组

文章数量:1344522

I have a file called index.js:

"use strict";

var $ = require("jquery");
window.jQuery = $;

export function foo() {
    console.log('hello world');
}

And in the same directory, webpack-config.js:

module.exports = {
    entry: './index.js',
    output: {
        filename: './dist.js'
    },
    mode: "development"
};

And finally I have an index.html file which loads my bundled JavaScript, and tries to use the exported function definition...

<script src="/media/js/dist/dist.js"></script>
<script type='text/javascript'>
    foo();
</script>

When I run webpack, I see no output errors.

But when I load my HTML page, I see:

(index):211 Uncaught ReferenceError: foo is not defined
   at (index):211

What am I doing wrong? The dist.js file is loading perfectly OK.

I have a file called index.js:

"use strict";

var $ = require("jquery");
window.jQuery = $;

export function foo() {
    console.log('hello world');
}

And in the same directory, webpack-config.js:

module.exports = {
    entry: './index.js',
    output: {
        filename: './dist.js'
    },
    mode: "development"
};

And finally I have an index.html file which loads my bundled JavaScript, and tries to use the exported function definition...

<script src="/media/js/dist/dist.js"></script>
<script type='text/javascript'>
    foo();
</script>

When I run webpack, I see no output errors.

But when I load my HTML page, I see:

(index):211 Uncaught ReferenceError: foo is not defined
   at (index):211

What am I doing wrong? The dist.js file is loading perfectly OK.

• javascript
• webpack

Share Improve this question Follow asked May 12, 2019 at 19:15 RichardRichard 65.7k135135 gold badges356356 silver badges571571 bronze badges 1

• Just like you did with jQuery: window.foo = foo; – connexo Commented May 12, 2019 at 23:25

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

Add a library property to your output configuration:

module.exports = {
    entry: './index.js',
    output: {
        filename: './dist.js',
        library: 'myLibrary'
    },
    mode: "development"
};

Then in index.js, you should be able to call foo() like so:

myLibrary.foo();

For this to work it's important that the foo() function is being exported with export function and not export default function

本文标签： javascriptHow to export a function with Webpack and use it in an HTML pageStack Overflow