webpack的入口起点（EntryPoints）

单个入口(简写)语法

用法：

entry:string|Array<string>

举例：

webpack.config.js

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

T> 当你向 entry 传入一个数组时会发生什么？向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。

传入数组这种方式有助于，在你想要多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个“chunk”时。

当你正在寻找为「一个应用程序或只有一个入口起点的工具（即 library）」快速设置一个 webpack 配置的时候，这会是个很不错的选择。

但是，使用此语法扩展(extend or scale)配置没有太多的灵活性。

对象语法

用法：

entry: {[entryChunkName: string]: string|Array<string>}

webpack.config.js

const config = {entry: {app: './src/app.js',vendors: './src/vendors.js'}};

对象语法会比较繁琐。然而，这是应用程序中定义入口的最可扩展的方式。

T> “可扩展的 webpack 配置”是指，可重用并且可以与其他配置组合使用。这是一种流行的技术，用于将关注点(concern)从环境(environment)、构建目标(build target)、运行时(runtime)中分离。然后使用专门的工具（如 webpack-merge）将它们合并。

常见场景

以下列出入口配置和它们的实际用例：

分离 应用程序(app) 和 公共库(vendor) 入口

webpack.config.js

const config = {entry: {app: './src/app.js',vendors: './src/vendors.js'}};

多个页面应用程序

webpack.config.js

 

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

 

总结

以上是生活随笔为你收集整理的webpack的入口起点（EntryPoints）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。