如何在HTML script标签中正常引入webpack 5打包的库

问题根因 #

webpack 5 对 UMD 打包的默认全局挂载对象做了调整，从 webpack 4 的 this 改成了 self，普通浏览器通过 script 标签直接加载的场景下，会导致库无法正常挂载到 window 全局对象上，所以你参考的 webpack 4 旧教程的配置不再生效。

修复方案 #

只需要在 webpack.config.js 的 output 配置中新增 globalObject 字段指定挂载对象即可，修改后的完整配置如下：

// webpack.config.js
module.exports = {
    mode: "development",
    devServer: {
        port: 3030,
    },
    entry: {
        lib: "./src/index.js",
    },
    output: {
        filename: `[name].js`,
        // 新增这一行，指定UMD模式下全局挂载对象为this，浏览器环境下this指向window
        globalObject: 'this',
        libraryTarget: "umd",
        library: "MyLib"
    },
}

webpack 5 也更推荐用对象格式写 library 配置，可读性更强，等价写法如下：

output: {
    filename: `[name].js`,
    globalObject: 'this',
    library: {
        name: 'MyLib',
        type: 'umd'
    }
}

验证效果 #

修改配置后重新启动打包服务，打开控制台即可正常访问：

• MyLib.test() 会返回 42
• window.MyLib 也可以正常拿到导出的库对象

内容的提问来源于stack exchange，提问作者Ennoriel