Entry Points
定义webpack configuration中的entry属性有很多方式,以下将阐述配置entry属性的几种方式。
Single Entry (Shorthand) Syntax
单一入口 简略写法webpack.config.js
const config = {
entry: './path/to/my/entry/file.js'
};
是以下写法的简略写法
const config = {
entry: {
main: './path/to/my/entry/file.js'
}
};
Object Syntax
当你把一个数组赋值给main时,叫做多入口文件
Object Syntax
webpack.config.js
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
对象语法比较冗长,但是,它是可拓展性做好的定义entry的方式。可拓展的webpack配置是指可以复用的、可以与其它配置合并的技术。根据环境、运行时等分割,之后利用webpack-merge工具合并。
Scenarios
下面是entry配置的使用示例
Separate App and Vendor Entries 分离开发入口和生产入口
webpack.config.js
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
以上代码告诉webpack既从app.js开始建立依赖图,又从vendors.js开始建立依赖图,这两个依赖图是相互分离和独立的。
为什么要这样设置呢,你可以利用CommonChunkPlugin从app代码集合中提取出任意生产标记放入你的生产代码集合中。如果你的应用程序中没有生产环境代码,那么,你可以的到webpack中的共同模式,叫做long-term vendor-caching.
Multi Page Application
webpack.config.js
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
以上代码告诉webpack,我们想要3个相互独立的依赖图。
原因:在多页应用中,服务器会给你一个新的html文件,页面会重新加载,资源也会重新下载。它给予我们机会做不同的事情:
》利用CommonsChunkPlugin建立页面间共享的应用代码束。