我希望创建一个前端库。因此我想使用webpack。我特别喜欢css和image loader。但是如果我使用webpack,我只能要求非JS文件。由于我正在构建一个库,我无法保证我的库的用户也会这样做。
有没有一种方法将所有内容捆绑成UMD模块以发布?我尝试使用多个入口点,但随后无法要求该模块。
有没有一种方法将所有内容捆绑成UMD模块以发布?我尝试使用多个入口点,但随后无法要求该模块。
webpack.config.js
。这里有一个带有示例库的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
import filename from "package/filename"
? 而不是 import {filename} from ...
? - HalfWebDev@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
},
import
来使用它?那么为什么说“只有在使用webpack时才能引入非JS文件”呢?你能给个例子吗?至于“我尝试使用多个入口点”,你是否考虑过可能不需要webpack
,只用babel
就足够了呢? - Oleg Prowebpack
或babel
直接使用它。我已将此示例发布到Github。您是否可以检查一下告诉我这是否符合您的要求?https://github.com/UsulPro/libpack - Oleg Pro