我试图做一些我认为应该是可能的事情,但我真的不明白如何从webpack留档。
我正在编写一个包含几个模块的JavaScript库,这些模块可能相互依赖,也可能不相互依赖。最重要的是,所有模块都使用jQuery,其中一些可能需要jQuery插件。然后,这个库将在几个不同的网站上使用,这些网站可能需要一些或所有模块。
定义模块之间的依赖关系非常容易,但是定义它们的第三方依赖关系似乎比我预期的要难。
我想实现的是:对于每个应用程序,我希望有两个捆绑文件,一个具有必要的第三方依赖项,另一个具有我的库中的必要模块。
示例:假设我的库具有以下模块:
我有一个应用程序(将其视为唯一的条目文件),需要模块a、b和c。此案例的网页包应生成以下文件:
最后,我更喜欢将jQuery作为全局,这样我就不需要在每个文件上都需要它(例如,我可以只在主文件上需要它)。jQuery插件将扩展$global,以防需要它们(如果其他不需要它们的模块也可以使用它们,这不是问题)。
假设这是可能的,在这种情况下,webpack配置文件的示例是什么?我在配置文件上尝试了加载器、外部程序和插件的几种组合,但我真的不知道它们在做什么,我应该使用哪些。谢谢你!
如果您有兴趣将您的脚本与供应商的脚本分开自动捆绑:
var webpack = require('webpack'),
pkg = require('./package.json'), //loads npm config file
html = require('html-webpack-plugin');
module.exports = {
context : __dirname + '/app',
entry : {
app : __dirname + '/app/index.js',
vendor : Object.keys(pkg.dependencies) //get npm vendors deps from config
},
output : {
path : __dirname + '/dist',
filename : 'app.min-[hash:6].js'
},
plugins: [
//Finally add this line to bundle the vendor code separately
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.min-[hash:6].js'),
new html({template : __dirname + '/app/index.html'})
]
};
您可以在官方留档中阅读有关此功能的更多信息。
我不确定我是否完全理解你的问题,但因为我最近有类似的问题,我会尽力帮助你。
供应商包。
你应该使用CommonChunkPlugin。在配置中,指定区块的名称(例如,vendor
)和将生成的文件名(vendor.js
)。
new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js", Infinity),
现在,重要的是,您现在必须指定它是什么意思vendor
library,并在条目部分中这样做。再向条目列表添加一个与新声明的区块名称相同的项目(即本例中的“供应商”)。该条目的值应该是要移动到vendor
bundle的所有模块的列表。在您的情况下,它应该类似于:
entry: {
app: 'entry.js',
vendor: ['jquery', 'jquery.plugin1']
}
JQuery作为全局查询
有同样的问题,并解决了它与ProVidePlugin.在这里,你不是定义全局对象,但类型shurtCut到模块.即,你可以配置它像:
new webpack.ProvidePlugin({
$: "jquery"
})
现在您可以在代码中的任何地方使用$
,网页会自动将其转换为
require('jquery')
我希望这有帮助。你也可以看看我的网页配置文件,在这里
我喜欢webpack,但我同意留档不是最好的一个在世界上...
编辑:
要获得特定于入口点的供应商区块,只需多次使用CommonChunkPlugins:
new webpack.optimize.CommonsChunkPlugin("vendor-page1", "vendor-page1.js", Infinity),
new webpack.optimize.CommonsChunkPlugin("vendor-page2", "vendor-page2.js", Infinity),
然后为不同的文件声明不同的扩展库:
entry: {
page1: ['entry.js'],
page2: ['entry2.js'],
"vendor-page1": [
'lodash'
],
"vendor-page2": [
'jquery'
]
},
如果一些库在入口点之间重叠(并且对大多数库来说),那么您可以使用相同的插件将它们提取到公共文件中,只是配置不同。看这个例子。
在我的webpack.config.js(版本1,2,3)文件中,我有
function isExternal(module) {
var context = module.context;
if (typeof context !== 'string') {
return false;
}
return context.indexOf('node_modules') !== -1;
}
在我的插件数组中
plugins: [
new CommonsChunkPlugin({
name: 'vendors',
minChunks: function(module) {
return isExternal(module);
}
}),
// Other plugins
]
现在我有了一个文件,它只根据需要将第三方LIB添加到一个文件中。
如果您想在分离供应商和文件的地方获得更精细的切入点:
plugins: [
new CommonsChunkPlugin({
name: 'common',
minChunks: function(module, count) {
return !isExternal(module) && count >= 2; // adjustable
}
}),
new CommonsChunkPlugin({
name: 'vendors',
chunks: ['common'],
// or if you have an key value object for your entries
// chunks: Object.keys(entry).concat('common')
minChunks: function(module) {
return isExternal(module);
}
})
]
请注意,插件的顺序非常重要。
同样,在版本4中,这一点也将发生变化。正式发布后,我会更新这个答案。
更新: indexOf搜索更改Windows用户
问题内容: 我正在尝试将Go供应商(将依赖项存储在名为的文件夹中)引入现有的App Engine项目。我已将所有依赖项存储在供应商文件夹中(使用Godep作为帮助程序),它看起来不错,但是在本地运行应用程序时出现以下错误: 我相信这两个位置应解析为相同的位置,因为Go应用程序应首先在文件夹中查找。有没有办法让Appengine理解两个依赖项是相同的? 问题答案: 我设法使用govendor而不是G
问题内容: 我了解launch4j不会将JRE捆绑在中,但是您必须将其放置在它旁边。我的问题是,我应该怎么做?Maven是否有一种方法可以自动找到并复制我用来构建应用程序的JDK的JRE并将其复制到给定目录? 我试图做这样的事情: 但是程序无法启动。它显示了一个小对话框,该对话框立即消失了(它似乎是空白的,但是消失得太快了,我无法真正注意到它)。 问题答案: 更新:删除了我以前的答案,并用经过测试
我有以下结构: 我不知道如何构建一切,以便: 在本地运行服务器,以便调试 制作生产tar(例如使用应用程序插件) 生产应如下所示: ktor作为主服务器 ktor应用程序有API 所有反应JS/超文本标记语言文件也由ktor提供 换句话说,我想从单个Web应用程序提供所有服务。 我知道我可以制作两个独立的服务——一个用于反应,一个用于应用编程接口。但是我想把它捆绑到一个应用程序中。 地方发展要快。
问题内容: 当我尝试将Webpack与简单的Express服务器一起使用时,总是会收到大量错误消息: express.js 我得到所有这些错误: 这是我的配置文件: 我该怎么办,我还需要在服务器端使用webpack。 我像这样运行express.js文件: 问题答案: 我最终要做的是,我使用了两种不同的配置,一种用于使用webpack将服务器内容打包在一起,另一种用于将所有浏览器内容打包在一起,并
我最近不得不考虑一个新的软件的部署方法,它是用以下代码编写的: 雀巢6/Express 该软件将部署在160多台服务器上,分布在整个欧洲,其中一些服务器的互联网连接非常糟糕。 我做了一些研究,很多人明确建议不要捆绑销售。主要的论点是本机扩展将失败与捆绑器,如或(剧透:这是真的,但有一个解决方案)。在我看来,这在很大程度上是由于人们不关心这个事实:的作者在这个用例中使用了几乎相同的词。所以通常,我被
背景: 在我的组织中,有很多基于Java的Windows桌面应用程序。在我们的专有软件部署系统中,应用程序不包含单独的JRE/JDK。而是将一个通用的JRE(到目前为止,Oracle8 Java SE JRE)部署到用户机器上,该机器根据环境变量附加到各个应用程序。 此外,是否可以在JDK11上使用jlink来创建一个包含被删除的Java SE EE模块的运行时?我可以使用Java10中的jlin