webpack 核心概念-entry

概念-entry

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

每个依赖项随即被处理，最后输出到称之为 bundles 的文件中，我们将在下一章节详细讨论这个过程。

可以通过配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src。

先看一个简单的例子：

webpack.config.js

module.exports = {

  entry: './path/to/my/entry/file.js'

};

简单理解

entry是webpack 进行构建时的入口

entry 的写法有三种 分别是1 字符串 2 数组 3 对象

其中 字符串 和数组是 对象的一种简写形式

写法说明

1、对象

对象写法其实就是webpack entry的完整写法。这种形式扩展性别叫强。

2、字符串

字符串写法其实就是单个对象简写形式。使用此语法在扩展配置时有失灵活。

3、数组

数组写法其实就是多个入口的简写形式。向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个“chunk”时，传入数组的方式就很有用。

基本用法

在webpack中，有多种配置entry的方法，接下来我们来详细说明及如何去配置entry

1、单个入口用法

api：entry: string|Array

webpack.config.js

完整写法：

module.exports = {

  entry: {

    main: './path/to/my/file.js'

  }

}

简写：

module.exports = {

  entry: './path/to/my/entry/file.js'

}

数组：

module.exports = {

  entry: ['./path/to/my/entry/file.js']

}

2、多个入口用法

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

webpack.config.js

完整写法：

const config = {

  entry: {

    app: './src/app.js',

    vendors: './src/vendors.js'

  }

};

数组写法

module.exports = {

  entry: ['./src/app.js', './src/vendors.js']

}