webpack的入口起点（EntryPoints）

以你之姓@ 2023-10-18 09:13 55阅读 0赞

### 单个入口(简写)语法 ###

用法：

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-merge]: https://github.com/survivejs/webpack-merge