如何将库与 webpack 捆绑在一起？答案

【问题标题】：How to bundle a library with webpack?如何将库与 webpack 捆绑在一起？
【发布时间】：2017-05-12 14:24:42
【问题描述】：

我想创建一个前端库。因此我想使用 webpack。我特别喜欢 css 和图像加载器。但是，如果我使用 webpack，我只能需要非 JS 文件。因为我正在建立一个图书馆，所以我不能保证我的图书馆的用户也会这样做。

我有没有办法将所有内容捆绑到一个 UMD 模块中来发布它？我尝试使用多个入口点，但是我不能要求该模块。

提前致谢

【问题讨论】：

也许我错过了什么，你的意思是你想把你的库包发布到npm，而用户会import吗？那么为什么“如果我使用 webpack，我只能需要非 JS 文件”？你能举个例子吗？关于“我尝试使用多个入口点”您是否考虑过您不需要webpack 的可能性 - 只有babel 就足够了？
是的，我考虑过只使用 babel。但是，如果我需要（“./something.css”）并且不在我需要（“my-library”）的项目中使用 webpack。如果我运行它，它将不起作用。
所以你想创建一个可以在没有 webpack 的情况下使用的库？好的。你试过单入口点吗？
是的，但这基本上是我的问题。
嗨，Arwed Mett！它对你来说仍然是真实的吗？我刚刚创建了“webpack”包，最后我构建了一个库，它将图像和 css 封装在一个 JS 文件中。可以在没有webpack 或babel 的情况下导入并使用它。我已将此示例发布到 Github。你能检查一下并告诉我这是你问的吗？ github.com/UsulPro/libpack

标签： javascript webpack umd

【解决方案1】：

您可以在 Webpack 2.0 documentation site 中找到创建库的好指南。这就是为什么我在此示例中使用webpack.config.js 中的ver 2 语法。

这是带有示例库的Github repo。

它将来自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

【讨论】：

库图是不是只有内联才能使用？
@davesaus 您可以将图像保存在单独的文件中。这取决于你将如何使用它
如果我想让 App 也与 lib 一起构建，我需要什么？
我如何获得import filename from "package/filename"？而不是import {filename} from ... 使用这种语法？

【解决方案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
  },

【讨论】：