时间戳

首页 > 解决方案 > webpack5 output.library 无法导入

javascript - webpack5 output.library 无法导入

问题描述

问题

我<script>曾经在 HTML 中导入由 webpack5 捆绑的 index.bundle.js。但我失败了。

选项文件

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

代码

我已经检查了官方文档。但我找不到答案。我的代码在这里

采用

yarn 
npm run build

然后打开index.html，可以发现错误。

标签： javascriptwebpack

解决方案

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

如果要将这些函数放在根窗口对象上，则需要在代码中执行此操作：

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

// etc.

您可以通过签出来看到这一点dist/index.js（将其放入Prettier 在线工具中可以将其清理得足够可读）。

推荐阅读