如何使用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
  },