使用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構建可導入腳本標記的庫

回答

相關問題