Webpack核心概念之Entry Points

Webpack核心概念之Entry Points

作者:梁雁明

著权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Entry Points入点

提到过的Getting Startedwebpack配置文件中有多种方式定义 entry 属性。我们将向你展示定义entry 属性的方式,附加解释为什么对你是有用的。

Single Entry (Shorthand) Syntax单输入点法(简略

Usage: entry: string|Array

webpack.config.js

module.exports ={
  entry:'./path/to/my/entry/file.js'
};

The single entry syntax for the entry property is a 简略对象为:

module.exports ={
  entry:{
    main:'./path/to/my/entry/file.js'
  }
};

当向 entry入一个数组时生什么?  entry 属性文件路径数组时,将会“multi-main entry”当你注入多个依文件graph“chunk”。

很多的选择,当你想为应用快速配置webpack 配置文件或通过单输入点工具(IE: a library). 然而这种语法,没有太大灵活性在扩展或量化(scaling)你的配置.

Object Syntax

Usage: entry: {[entryChunkName: string]: string|Array}

webpack.config.js

module.exports ={
  entry:{
    app:'./src/app.js',
    vendors:'./src/vendors.js'
  }
};

对象语法虽然有些冗长然而这是在配置文件中最可度量的方式去定义entry/entries.

“Scalable webpack configurations” 是可以被重用且可以和其它配置文件部分合的一种方式。是一种很受迎的技被用作分隔因境、构建目和运行产生的困扰。后来被webpack-merge专业化工具合并了 

Scenarios脚本

以下是输入点的配置列表和实际使用案例:

分隔AppVendor Entries

webpack.config.js

module.exports ={
  entry:{
    app:'./src/app.js',
    vendors:'./src/vendors.js'
  }
};

What does this do? 从表面上看,配置文件告诉webpack通过app.js vendors.js创建依赖图表这些图表是完全分隔和相互独立的(webpack中每一个bundle的启动入口)。这种方式在只有单一输入点的单页面程序中是很常见的(除了vendors).

为什么呢? 这种启动允许你去改变CommonsChunkPlugin及取出任何从你app bundlevendor引用到vendor bundle, 通过使用 __webpack_require__() 调用来替换如果在你的应用bundle中没有vendor 代码。那么你可以获得一种通用的模式在webpack中已知的long-term vendor-caching.

移除scenario脚本以支持可以提供更好vendor-splitting DllPlugin,。

Multi Page Application程序

webpack.config.js

module.exports ={
  entry:{
    pageOne:'./src/pageOne/index.js',
    pageTwo:'./src/pageTwo/index.js',
    pageThree:'./src/pageThree/index.js'
  }
};

这是干吗用的?我们告诉webpack我们想要3个分离的依赖图表(like the above example).

为什么? 在多页应用中,服务器会为你抓取一个新的HTML 文档页面重载这个文档且资产也被重新下载。然而这给了我们唯一的机会去操作多页面的事情:

使用CommonsChunkPlugin在每个页面之间生成共享程序代码的块。当输入点数量增加的时候,输入点重新使用过多代码/模块/的多页面应用可以从此项技术中受益很多。

按一般律而言每一个HTML文档准确使用一个输入点

文章发布只为分享区块链技术内容,版权归原作者所有,观点仅代表作者本人,绝不代表区块链兄弟赞同其观点或证实其描述。

Webpack核心概念之Entry Points

该内容来自于互联网公开内容,非区块链原创内容,如若转载,请注明出处:https://htzkw.com/archives/4179

联系我们

aliyinhang@gmail.com