入口起点(entry points)
源文链接:入口起点(entry points)
正如我们在起步中提到的,在 webpack 配置中有多种方式定义 entry
属性。除了解释为什么它可能非常有用,我们还将向你展示如何去配置entry
属性
单个入口(简写)语法
用法:entry: string | Array<string>
webpack.config.js
const config = {
entry: './path/to/my/entry/file.js'
};
module.exports = config;
entry
属性的单个入口语法,是下面的简写:
const config = {
entry: {
main: './path/to/my/entry/file.js'
}
};
当你向
entry
传入一个数组时会发生什么?向entry
属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入,并且将它们的依赖导向(graph)到一个"chunk"时,传入数组的方式就很有用。
当你正在寻找为「只有一个入口起点的应用程序或工具(即 library)」快速设置 webpack 配置的时候,这会是个很不错的选择。然而,使用此语法在扩展配置时有失灵活性。
对象语法
用法:entry: {[entryChunkName: string]: string|Array<string>}
webpack.config.js
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
对象语法会比较繁琐。然而,这是应用程序中定义入口的最可扩展的方式。
“可扩展的 webpack 配置”是指定,可重用并且可以与其他配置组合使用。这是一种流行的技术,用于将关注点(concern)从环境(environment)、构建目录(build target)、运行时(runtime)中分离。然后使用专门的工具(如 webpack-merge)将它们合并。
常见场景
分离 应用程序和 第三方库(vendor) 入口
const path = require('path');
const config = {
mode: "development",
entry: {
app: './index.js',
lib: ['./jquery']
},
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name]_bundle.js',
}
};
module.exports = config;
多页面应用程序
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};