Webpack 的 entry 属性可以用多种方法来进行配置，接下来会解释 entry 属性的作用以及如何配置。
单入口法（简写）
- 语法：
entry: string|Array<string>
const config = {
entry: './path/to/my/entry/file.js'
};
module.exports = config;
上述语法是如下 entry 属性配置的简写
const config = {
entry: {
main: './path/to/my/entry/file.js'
}
};
module.exports = config;
当给 entry 传入的值是一个文件路径数组时，会创建 '多主入口' ，在要将多个依赖一起注入，并将他们转化为一块时很有用。
这种语法，在想要快速建立一个程序的 Webpack 的 entry 配置时，是很有用的。但其在语法扩展和配置缩放上灵活性不大。
对象法
- 语法：
entry: {[entryChunkName: string]: string|Array<string>}
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
对象法更为详细。这也是定义 entry 属性中扩展性最强的方法。
'可扩展 Webpack 配置' 是可以被其他部分配置重用和组合的配置。这是一种流行的技术，可以用来通过环境分离关注点、构建目标和运行时间，然后他们使用类似于 webpack-merge 之类专门的工具来进行合并。
使用场景
分离的 app 和 vendor 入口
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
- 这段话做了什么？
他告诉 Webpack 从 app.js 和 vendor.js 两个入口文件开始创建依赖关系。这些依赖是完全分离、相互独立的。
这是常见的单页面应用，除 vendor 外，只有一个入口点。 - 为什么要这样？
这样设置允许你使用 CommonsChunkPlugin 并且可以从你的应用打包文件中引入任何 vendor ，代替了调用 webpack_require()。如果在你的应用中，没有 vendor 代码，则可以实现所谓的长期供应商的 Webpack 缓存的一种常见模式。
多页面应用
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
- 这段话做了什么？
他告诉 Webpack 有三个依赖关系。
这是常见的单页面应用，除 vendor 外，只有一个入口点。 - 为什么要这样？
在一个多页面应用中，服务器将为您获取一个新的 HTML 文档，网页会重载文档和资源。然而，这给了我们唯一一个去做多种事情的机会。
使用 CommonsChunkPlugin 来创建各个页面间的共享应用程序代码包。随着入口点数量的增加，各个入口点会大大受益于多页面间大量代码/模块的重用技术。
网友评论