javascript - 如何将库与 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://krasimrtsonev.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
  },