原创翻译,转载请注明出处。
原文地址:https://webpack.js.org/concepts/entry-points
就像我们在介绍里提到的那样,在你的webpack配置文件里有很多方法去定义entry属性。我们将给你展示几种方法,并说明它为什么对你有用。
单个的Entry(简写)语法
用法:entry: string | Array<string>
webpack.config.js
const config ={ entry:'./path/to/my/entry/file.js' }; module.exports = config;
这个单个的enry语法是下面的命令的简写:
const config ={ entry:{ main:'./path/to/my/entry/file.js' } };
当你想为一个应用或者工具快速设置webpack配置的时候,单个入口点是一个不错的选择。当然,使用这个命令对于扩展或缩减你的配置的时候没有多少灵活性。
对象语法
用法:entry:{[entryChunkName: string]: string | Array<string>}
webpack.config.js
const config ={ entry:{ app:'./src/app.js', vendors:'./src/vendors.js' } };
这个对象语法更详细一些。但是这是在你的应用里扩展性最好的entry/entries定义方法。
脚本
下面是一组entry配置列表和他们的真实用例:
分开App和Vendor入口
webpack.config.js
const config ={ entry:{ app:'./src/app.js', vendors:'./src/vendors.js' } };
它做了些什么?表面上看它告诉webpack用app.js和vendor.js两个文件作为起始,来创建依赖图。这些依赖图将被完全分开并且不依赖于对方而完全独立(在各自的包里将都会有一个webpack引导程序)。这常见于只有一个入口点(不包括vendors)的单页应用。
为什么要这样?这个设置允许你利用CommonChunkPlugin,从你的app包里提取出所有的vendor参照把它们放入vendor包里,通过调用__webpack_require__()放法来替代他们。如果在你的应用包里没有vendor代码,那你可以实现一种共通的模式,在webpack里成为“long-term vendor-caching”。
多页应用
webpack.config.js
const config ={ entry:{ pageOne:'./src/pageOne/index.js', pageTwo:'./src/pageTwo/index.js', pageThree:'./src/pageThree/index.js' } };
它做了什么?告诉webpack我们想要3个独立的依赖图(就像上面的例子)
为什么?在一个多页应用里,服务器将为你取的一个新的HTML 文档。页面重载这个新的文档,资源被重新下载。这给了我们很好的机会来做下面的很多事情:
- 使用CommonChunkPlugin来作成在各个页面都使用的共享包。那些在各个入口点复用很多代码或者模块的多页应用,采用这些技术会去的很好的效果,虽然入口点会有所增加。
-- End --