如何将库与 webpack 捆绑在一起?

问题描述

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

I want to create a frontend library.Therefore I want to use webpack. I especially like the css and image loader.However I can only require non-JS files if I am using webpack.Because I am building a library, I cannot garanty that the user of my library will too.

有没有办法将所有内容捆绑到 UMD 模块中以发布它?我尝试使用多个入口点，但那时我不能要求该模块.

Is there I way to bundle everything into a UMD module to publish it?I tried using multiple entry points, however I cannot require the module then.

提前致谢

推荐答案

您可以找到在 Webpack 2.0 中创建库的好指南 文档站点.这就是为什么我在这个例子的 webpack.config.js 中使用 ver 2 语法.

You can find good guide for creating libraries in Webpack 2.0 documentation site. That's why I use ver 2 syntax in webpack.config.js for this example.

这是一个带有示例库的 Github 存储库.

Here is a Github repo with an example library.

它将所有来自 src/(js、png 和 css)的文件构建到一个 JS 包中可以简单地要求作为 umd 模块.

It builds all files from src/ (js, png and css) into one JS bundle which could be simply required as an umd module.

为此我们需要在webpack.config.js中指定以下设置:

for that we need to specify the follow settings in webpack.config.js:

output: {
    path: './dist',
    filename: 'libpack.js',
    library: 'libpack',
    libraryTarget:'umd'
},

和 package.json 应该有:

"main": "dist/libpack.js",

请注意，您需要使用适当的加载程序将所有内容打包到一个文件中.例如base64-image-loader 而不是 file-loader

这篇关于如何将库与 webpack 捆绑在一起?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！