Entry Points
如“ 入门”中所述,有多种方法可以entry
在webpack配置中定义属性。我们会告诉你,你的方法可以配置的entry
属性,除了解释为什么它可能对你有用
Single Entry (Shorthand) Syntax
Usage: entry: string|Array<string>
webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js'
};
The single entry syntax for the entry
property is a shorthand for:
module.exports = {
entry: {
main: './path/to/my/entry/file.js'
}
};
传递数组时会发生什么entry
?将一组文件路径传递给entry
属性会创建所谓的“多主条目”。当您想要将多个依赖文件一起注入并将其依赖关系映射到一个“块”时,这非常有用。
当您希望为具有一个入口点(即库)的应用程序或工具快速设置webpack配置时,这是一个很好的选择。但是,使用此语法扩展或扩展配置的灵活性不大。
对象语法
用法: entry: {[entryChunkName: string]: string|Array<string>}
webpack.config.js
module.exports = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
对象语法更详细。但是,这是在应用程序中定义条目/条目的最具扩展性的方法。
方案
以下是条目配置及其实际用例列表:
单独的应用程序和供应商条目
webpack.config.js
module.exports = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
这是做什么的?在票面价值,这告诉的WebPack创建开始在两个依赖关系图app.js
和vendors.js
。这些图完全独立且彼此独立(每个包中都有一个webpack引导程序)。这通常适用于只有一个入口点(不包括供应商)的单页面应用程序。
为什么?此设置允许您利用CommonsChunkPlugin
应用程序包中的任何供应商参考并将其提取到供应商捆绑包中,并将其替换为__webpack_require__()
调用。如果应用程序包中没有供应商代码,那么您可以在webpack中实现一种称为长期供应商缓存的通用模式。
多页面应用程序
webpack.config.js
module.exports = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
这是做什么的?我们告诉webpack我们想要3个独立的依赖图(如上例所示)。
为什么?在多页面应用程序中,服务器将为您提取新的HTML文档。该页面重新加载此新文档,并且资源已重新加载。但是,这为我们提供了做多件事的独特机会:
- 用于
CommonsChunkPlugin
在每个页面之间创建共享应用程序代码包。随着入口点数量的增加,在入口点之间重用大量代码/模块的多页面应用程序可以从这些技术中受益匪浅。
根据经验:对于每个HTML文档,只使用一个入口点。