如何使用webpack打包一个库？

Question

我希望创建一个前端库。因此我想使用webpack。我特别喜欢css和image loader。但是如果我使用webpack，我只能要求非JS文件。由于我正在构建一个库，我无法保证我的库的用户也会这样做。

有没有一种方法将所有内容捆绑成UMD模块以发布？我尝试使用多个入口点，但随后无法要求该模块。

- Arwed Mett

---

也许我漏掉了什么，你的意思是想将你的库包发布到npm上，然后用户可以通过import来使用它？那么为什么说“只有在使用webpack时才能引入非JS文件”呢？你能给个例子吗？至于“我尝试使用多个入口点”，你是否考虑过可能不需要webpack，只用babel就足够了呢？ - Oleg Pro

是的，但基本上这就是我的问题，如何做到这一点。 - Arwed Mett

你好 Arwed Mett！这件事对你仍然有意义吗？我刚刚尝试了创建“webpack”包并最终构建了一个库，其中将图像和css封装在一个JS文件中。可以导入并且无需使用 webpack 或 babel 直接使用它。我已将此示例发布到Github。您是否可以检查一下告诉我这是否符合您的要求？https://github.com/UsulPro/libpack - Oleg Pro

那正是我在寻找的，谢谢。 - Arwed Mett

请查看以下网址：https://github.com/atte-backman/ts-library-boilerplate/blob/master/src/app/services/postService.ts。 - nhaa123

Answer 1

您可以在Webpack 2.0的文档网站中找到创建库的良好指南。这就是为什么我在此示例中使用版本2语法的webpack.config.js。

这里有一个带有示例库的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

- Oleg Pro

---

那么，图书馆中的图片只有在内联的情况下才能使用吗？ - davesaus

@davesaus，你可以将图像保存在单独的文件中。这取决于你打算如何使用它。 - Oleg Pro

如果我想要将应用程序与库一起构建，我需要什么？ - Nikola Lukic

如何使用这个语法获取 import filename from "package/filename"? 而不是 import {filename} from ...？ - HalfWebDev

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
  },

- xeiton