Entry Points
文档地址
webpack支持多种方式定义entry属性。
Single Entry[shorthand] Syntax
entry: string|Array<String>
webpack.config.js
const config = {
entry: './path/to/my/entry/file.js'
};
module.exports = config;
该配置语法可以缩写为
const config = {
entry: {
main: './path/to/my/entry/file.js'
}
};
当将
entry设置为array时。会创建位multi-main enty.
在多个以来文件打包成一个chunk的场景会比较有用
当快速配置webpack时，使用这种方式会比较好，但使用该种语法扩展性会比较差。
Object Syntax
entry: {[entryChunkName: string]: string|Array<string>}
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
使用object语法定义entry point。是扩展性最佳的定义方式。
Scalable webpack configurations指可以重用的方便跟其他配置结合的通用配置。
该方式是比较流行的技术，用来分离environment,build target,runtime。
使用webpack-merge将这些配置进行整合。
Scenarios
下面是真实项目中的一些配置
Separate App and Vendor Entries
//webpack.config.js
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
上面的配置做了什么？
首先让webpack从app.js和vendors.js开始创建依赖图(dependcy graph)。
这两个依赖图是完全独立的(每个生成的bundle(每张依赖图对应的bundle)中都会包含bootstrap)
上面的配置一般适用于只包含一个entry point的SPA应用.（不包括vendors）
为什么要这么做
这样配置可以将vendor引用从app bundle中抽取到vender bundle。将这些替换为__webpack_reuire__()调用。
如果在appbundle中没有vendor代码，那可以使用常用模式longterm vendor-caching
Multi Page Application
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
上面的配置做了什么？
让webpack创建三个独立的依赖图
为什么要这么做?
在多页应用中，server将会获取HTML文档。页面重载，
新的html及新资源会被重新下载。基于这个机制我们可以做如下的事情。
- 使用
CommonsChunkPlugin创建多页中的公用的内容。多页应用会重用entry
point中的code/modules。
根据经验，每个HTML文档都要制定一个entry point
