如何将库与 webpack 捆绑在一起?
How to bundle a library with webpack?
我想创建一个前端库。
因此我想使用 webpack。我特别喜欢 css 和图像加载器。
但是,如果我使用 webpack,我只能需要非 JS 文件。
因为我正在建立一个图书馆,所以我不能保证我的图书馆的用户也会这样做。
有没有办法把所有的东西打包成一个UMD模块来发布?
我尝试使用多个入口点,但是我不能要求模块。
提前致谢
您可以找到在 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
@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。我特别喜欢 css 和图像加载器。 但是,如果我使用 webpack,我只能需要非 JS 文件。 因为我正在建立一个图书馆,所以我不能保证我的图书馆的用户也会这样做。
有没有办法把所有的东西打包成一个UMD模块来发布? 我尝试使用多个入口点,但是我不能要求模块。
提前致谢
您可以找到在 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
@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
},