webpack5 output.library无法导入

Question

问题

我使用<script>导入index.bundle.js，该包由webpack5捆绑在一个失败的HTML.But中。

选项文件

//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>

错误

Uncaught TypeError: window.mount is not a function

代码

我检查了正式文件.But，我找不到答案。我的代码是这里

使用

yarn 
npm run build 

然后打开index.html，您可以找到错误。

Answer 1

使用当前的配置(这不是将它们放在根window对象上)，您可以使用window.test.mount()访问函数，因为这就是webpack配置中library中的配置。

如果要将这些函数放在根窗口对象上，则需要在代码中这样做：

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

// etc.

您可以通过签出dist/index.js来看到这一点(把它放到更漂亮的在线工具中就可以清理它，以便于阅读)。