webpack5 output.library 无法导入

Question

problem

I use <script> to import index.bundle.js which bundled by webpack5 in a HTML.But I failed.

option file

//webpack.config.js
const path = require('path');

module.exports = {
    entry: {
        index: '/src/index.ts'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        library: 'test',
        libraryTarget: 'umd',
    }
}

//index.ts
export function mount() {
    console.log("mount")
}

//html
 <script src="dist/index.js"></script>
    <script>
        console.log(window.mount());
    </script>

error

Uncaught TypeError: window.mount is not a function

code

I have checked the official documentation .But I can't find answer. my code is here

use

yarn 
npm run build 

then open the index.html,you can find the error.

Answer 1

Using the config you currently have (which is not putting them on the root window object), you can access your functions with window.test.mount() , because that's what you have in library in the webpack config.

If you want to put these functions on the root window object, you'd need to do that in your code:

export function mount() {
    console.log("mount")
}
window.mount = mount

// etc.

You can see this by checking out dist/index.js (dropping it in the Prettier tool online can clean it up enough to be readable).