Question

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

我是否可以将所有内容捆绑到UMD模块中进行发布？我尝试使用多个入口点，但是当时我不能要求模块。

提前致谢

Answer 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

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

如何使用webpack捆绑库？

2 个答案: