Question

我有一个Webpack项目，我正在构建一些库。它们都是用<script>标签导入的。我的配置如下所示：

entry: {
  bundle: ['./src/index', 'webpack-hot-middleware/client?reload=true'],
  mylib: ['./src/loader', 'webpack-hot-middleware/client?reload=true']
},
target: web,
output: {
  path: `${__dirname}/dist`, 
  publicPath: 'http://localhost:3000/',
  filename: '[name].js',
  library: ['mylib', '[name]'],
  libraryTarget: 'umd'
},

对于我的测试，我的切入点非常简单：

module.exports = 'abracadabra';

根据指南，我遵循how to build a complex library with webpack，如果我理解正确，这应该足以在浏览器中获取此行为（在使用脚本标记打开索引html文件之后）：

console.log(mylib) -> 'abracadabra'

然而，这不起作用，并且在浏览器的控制台中我可以看到mylib已定义，但它有一个奇怪的形状：

Object {mylib: Object}
   mylib: Object
     subscribe: function subscribe(handler)
     useCustomOverlay: function useCustomOverlay(customOverlay)
     __proto__: Object__proto__:

部分代码与HMR（热模块替换）有关，但我仍然不明白我应该如何使用我的模块。

有什么想法吗？

Answer 1

你的入口点有吗？

if (module.hot) {
    module.hot.accept();
}

使用webpack构建可导入脚本标记的库

1 个答案: