如何捆绑一个库与webpack?

h22fl7wq  于 2022-11-30  发布在  Webpack
关注(0)|答案(2)|浏览(190)

我想创建一个前端库。因此我想使用webpack。我特别喜欢css和图像加载器。但是,如果我使用webpack,我只能要求非JS文件。因为我正在建立一个库,我不能保证我的库的用户也会。
有没有办法把所有的东西都捆绑到一个UMD模块中来发布它呢?我试过使用多个入口点,但是我不能要求这个模块。

6jygbczu

6jygbczu1#

您可以在Webpack 2.0 documentation site中找到创建库的好指南。这就是为什么我在webpack.config.js中使用ver2语法的原因。
下面是一个带有示例库的Github repo
它将来自src/jspngcss)的所有文件构建到一个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*
q8l4jmvw

q8l4jmvw2#

@OlgPro写的评论很有帮助,我建议大家阅读这篇文章,了解这些东西是如何工作的
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
  },

相关问题