基本概念-entry

一、entry
用来定义入口文件,有三种格式:
1、字符串

entry: './src/app.js'

这种格式相当于

entry: {
  main: './src/app.js'
}

如果不指定打包的文件名,默认会打包成main.js

2、数组

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

这种情况会将两个文件都打包到main.js,这种方式适合于想要多个依赖文件一起注入,并且将它们的依赖导向到一个“chunk”

3、对象

entry: {
  app: './src/app.js',
  main: './src/index.js'
}

这种情况会打包成两个文件,文件名对应key值

总结:

其实这三种写法原理都是一样的,前两种写法是第三种的简写,也就是说,如果不提供key值,就会默认对应到“main",打包后的文件名也会对应key值。

二、entry结合webpack插件CommonsChunkPlugin的用法:
1、单入口,可用vendors(名字可以随意取)指定一些公用的库,打包到vendors.js

entry: {
  app: './src/app.js',
  vendors: ['react', 'react-dom']
}
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendors'   //名字要对应entry
});

2、多入口,提取入口文件的公共代码,打包到vendors.js

entry: {
  app: './src/app.js',
  index: './src/index.js'
}
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendors',//指定打包的文件名
  chunk: ['app']     //指定要提取公共代码的入口文件,没有这一项配置可默认提取所有的入口文件
  minChunks:2   //指定要打包的文件数,具体用法后面补充
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 14,354评论 7 110
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,281评论 19 139
  • 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过...
    阳阳阳一堆阳阅读 8,643评论 0 5
  • 构建一个小项目——FlyBird,学习webpack和react。(本文成文于2017/2/25) 从webpac...
    布蕾布蕾阅读 17,077评论 31 98
  • 黑夜最适合写进诗歌里 尤其是将眠未眠时 大概和李白 酒醉写诗是一个道理 他用喝酒来达到空明 混沌的清明 诗人是孤...
    柏浅歌阅读 1,477评论 24 11

友情链接更多精彩内容