概念-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<string>
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<string>}
webpack.config.js
完整写法:
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
数组写法
module.exports = {
entry: ['./src/app.js', './src/vendors.js']
}