如何使用webpack捆綁庫？

Question

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

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

提前致謝

Answer 1

您可以在Webpack 2.0 文檔站點找到創建庫的良好指南。 這就是我在webpack.config.js使用ver 2語法的原因。

這是一個帶有示例庫的Github倉庫 。

它將來自src/ （ js ， png和css ）的所有文件構建到一個JS包中，這可以簡單地作為umd模塊使用。

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

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

和package.json應該有：

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

請注意，您需要使用適當的加載器將所有內容打包在一個文件中。 例如base64-image-loader而不是file-loader

Answer 2

@OlegPro撰寫的評論非常有幫助。 我建議每個人都閱讀這篇文章，以解釋這些東西是如何工作的

http://krasimirtsonev.com/blog/article/javascript-library-starter-using-webpack-es6

如果您希望能夠在項目中導入捆綁文件，則需要以下內容

  output: {
    path: path.resolve(__dirname, myLibrary),
    filename: 'bundle.js',
    library: "myLibrary",   // Important
    libraryTarget: 'umd',   // Important
    umdNamedDefine: true   // Important
  },