tofacebook.com -专业IT技术社区 【百家号】脸书百科,webpack官方文档分析(三):Entry Points详解 Web程序 - tofacebook.com-专业IT技术社区
76°

【百家号】脸书百科,webpack官方文档分析(三):Entry Points详解 Web程序

标签:入口   使用   扩展性   col   https   page   poi   html   des   

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在每个页面之间创建共享应用程序代码包。随着入口点数量的增加,在入口点之间重用大量代码/模块的多页面应用程序可以从这些技术中受益匪浅。

 

webpack官方文档分析(三):Entry Points详解

标签:入口   使用   扩展性   col   https   page   poi   html   des   

原文地址:https://www.cnblogs.com/felixwang2/p/9375081.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: