webpack官方文档分析(三):Entry Points详解
2024-10-05 11:30:41
1、有很多种方法可以在webpack的配置中定义entry属性,为了解释为什么它对你有用,我们将展现有哪些方法可以配置entry属性。
2、单一条目语法
用法: entry: string|Array<string>
webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js'
};
上面的写法是下面的简写:
module.exports = {
entry: {
main: './path/to/my/entry/file.js'
}
};
当您希望为具有一个入口点的应用程序或工具(IE:库)快速设置webpack配置时,这是一个很好的选择。但是,使用此语法扩展或扩展配置的灵活性不大。
3、对象语法
用法: entry: {[entryChunkName: string]: string|Array<string>}
webpack.config.js
module.exports = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
对象语法更详细。但是,这是在应用程序中定义条目/条目的最具扩展性的方法
4、实际中的使用方案
(1)单独的应用程序
webpack.config.js
module.exports = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
原因:此设置允许您利用CommonsChunkPlugin
应用程序包中的任何vendor 参考并将其提取到vendor 捆绑包中,并将其替换为__webpack_require__()
调用。如果应用程序包中没有vendor 代码,那么您可以在webpack中实现一种称为长期供应商缓存的通用模式。
(2)多页面应用程序
webpack.config.js
module.exports = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
原因:
在多页面应用程序中,服务器将为您提取新的HTML文档。该页面重新加载此新文档,并且资源已重新加载。但是,这为我们提供了做多件事的独特机会:
- 用于
CommonsChunkPlugin
在每个页面之间创建共享应用程序代码包。随着入口点数量的增加,在入口点之间重用大量代码/模块的多页面应用程序可以从这些技术中受益匪浅。
最新文章
- JSP简单记录
- poj1308 并查集
- Poj(1797) Dijkstra对松弛条件的变形
- WebAPI 安全性 使用TOKEN+签名验证(上)
- [Angular 2] Rendering an Observable Date with the Async and Date Pipes
- BZOJ 1489: [HNOI2009]双递增序( dp )
- 一个完整的PHP类包含的七种语法说明
- 基于hi-nginx的web开发(python篇)——使用jinja2模板引擎
- Lazy Loading | Explicit Loading | Eager Loading in EntityFramework and EntityFramework.Core
- clCreateBuffer和clCreateBuufer + clEnqueueWriteBuffer
- RazorEngine
- python:Crypto模块的下载
- Gem install rmagick 报错问题~
- [Unit Testing] Using Mockito Annotations - @Mock, @InjectMocks, @RunWith
- python列表、集合、元祖、字典推导式
- 20165214 2017-2018-2 《Java程序设计》课程总结
- workerman vmstat服务器状态监控服务
- DFS服务待书写
- 怎么在eclipse中安装svn插件
- 【爬虫】通用抽取网页URL