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

我有一个Webpack项目，我正在构建几个库。他们两个都打算用<script>标签进口。我的配置如下所示：使用webpack构建可导入脚本标记的库

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'

但是，这并不工作，并在浏览器的控制台我可以发EE mylib定义，但它有一个奇怪的形状：

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

一些代码有与HMR（热模块更换）做的，但我仍然不明白，我应该如何使用我的模块。

任何想法？

来源

2016-07-05 Alex Escalante

你有没有在你的切入点？

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

来源

2016-07-06 17:33:10

我读了http://andrewhfarmer.com/webpack-hmr-tutorial/，现在我明白我需要包含这些行来启用HMR。但是，它们不能解决问题。现在我将我的出口附加到窗口以便继续开发： window.mylib = module.exports; 我会上传一个示例项目到Github来探索这个问题，并尽快要求我提供建议...... –

我做了一些快速测试，在我的设置中，Webpack似乎重新加载我的模块*即使我不*添加上面的行...奇怪？ –

由于module.hot为true，因此module.exports将在入口点中包含导出的东西。不知道该从哪里出发。 – walkerrandophsmith

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

回答

相关问题