如何使用webpack捆綁庫？

我想創建一個前端庫。因此我想使用webpack。我特別喜歡css和圖像加載器。但是，如果我使用webpack，我只能要求非JS文件。因爲我正在建立一個圖書館，所以我不能保證我的圖書館的用戶也會這樣做。如何使用webpack捆綁庫？

我有辦法將所有內容都捆綁到UMD模塊中進行發佈嗎？我試過使用多個入口點，但是我不能要求模塊。

在此先感謝

2016-12-28 Arwed Mett

也許我錯過了一些東西，你的意思是說你想發佈你的庫包到npm，並且用戶會'輸入'它呢？那麼爲什麼「如果我使用webpack只能使用非JS文件」呢？你能舉個例子嗎？關於「我嘗試使用多個入口點」你有沒有考慮過你不需要'webpack'的可能性 - 只有'babel'就足夠了？ –

是的我只考慮過使用babel。但是，如果我需要（「./ something.css」）並且不要在需要的項目中使用webpack（「my-library」）。如果我運行它，它將無法工作。 –

所以你想創建一個沒有webpack的庫？好。您是否嘗試過使用單一入口點？ –

你可以找到很好的指導在的WebPack 2.0 documentation site創建庫。這就是爲什麼我在這個例子中使用webpack.config.js的ver 2語法。

這是一個帶示例庫的Github repo。

它建立的所有文件從src/（js，png和css）其中可簡單地需要作爲umd模塊一個JS束。

爲此，我們需要在webpack.config.js指定如下設置：

output: { 
    path: './dist', 
    filename: 'libpack.js', 
    library: 'libpack', 
    libraryTarget:'umd' 
},

和package.json應該有：

"main": "dist/libpack.js",

請注意，您需要使用適當的裝載機收拾一切都在一個文件中。例如base64-image-loader而不是file-loader

2017-01-05 12:07:37

那麼，庫圖像只能在內聯時才能使用？ – davesaus

@davesaus您可以將圖像保存在單獨的文件中。這取決於你將如何使用它然後 –

我需要什麼，如果我想要應用程序還與lib一起建立？ –

回答