数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

浅谈webpack 四个核心概念之Entry

来源:脚本之家  责任编辑:小易  

因为webpack是基于nodejs的一款工具,所以在学习过程中涉及到的nodejs知识也会进行解释进行发散性拓展。

webpack中文文档

一、module.exports

module.exports = {
     entry: './path/to/my/entry/file.js'
  };

exports 变量是在模块的文件级作用域内可用的,且在模块执行之前赋值给 module.exports在nodejs中,提供了exports 和 require 两个对象,其中 exports 是模块公开的接口,require 用于从外部获取一个模块的接口,即所获取模块的 exports 对象。而在exports抛出的接口中,如果你希望你的模块就想为一个特别的对象类型,请使用module.exports;如果希望模块成为一个传统的模块实例,请使用exports.xx方法;module.exports才是真正的接口,exports只不过是它的一个辅助工具。最终返回给调用的是module.exports而不是exports。这里引用nodejs官网的一个 例子

function require(/* ... */) {
     const module = { exports: {} };
     ((module, exports) => {`请输入代码`
     // 模块代码在这。在这个例子中,定义了一个函数。
      function someFunc() {}
      exports = someFunc;//也就是说你单独给exports赋值时候exports不属于module了是一个单独的变量
    // 此时,exports 不再是一个 module.exports 的快捷方式,
    // 且这个模块依然导出一个空的默认对象。
      module.exports = someFunc;//这里导出的函数是挂在module里的所以会被导入
    // 此时,该模块导出 someFunc,而不是默认对象。
   })(module, module.exports);
   return module.exports;//这里是这句话的解释 (最终返回给调用的是module.exports而不是exports)
  }

二、entry

entry入口起点,entry所配置的文件路径所指向的文件为项目的入口文件也就是内部依赖的开始会根据入口文件去逐层加载依赖。Chunk 和打包时入口文件配置有关如果 entry 是一个 string 或 array ,就只会生成一个 Chunk,这时 Chunk 的名称是 main,如果 entry 是一个 object ,就可能会出现多个 Chunk,这时 Chunk 的名称是 object 键值对里键的名称。

entry接受三种类型值

1.单入口写法 String 例:

  entry: './app/to/my/entry/file.js'
  entry:{ main:"'./app/to/my/entry/file.js'"}

2.单入口数组写法 Array例:

  entry:['./app/entry1', './app/entry2']

 在你想要多个依赖文件一起注入,并且将它们的依赖导向(graph)到一个“chunk”时,传入数组的方式就很有用。也就是说合并了多个文件的依赖模块。

3.对象语法Object例:

entry:{ a: './app/entry-a', b: ['./app/entry-b1', './app/entry-b2']}

分离第三方模块和公共模块

分离第三方模块和webpack运行文件等类似公共模块是为了避免加载等问价过大等待时间长的优化,当你不同的入口文件都依赖了相同的第三方模块这时候需要把他们抽离出来。这里主要应用了entry的对象语法和CommonsChunkPlugin。实际应用举例:

1.分离业务模块和公共模块(webpack文件,第三方模块,自定义公共模块)

const path = require("path");
const webpack = require("webpack");
const packagejson = require("./package.json");
const config = {
entry: {
  first: './src/first.js',//引入了common.j和vue.js
  second: './src/second.js',//引入了common.j和vue.js
  vendor: Object.keys(packagejson.dependencies)//获取生产环境依赖库的
  //模块名称,返回一个数组,这里涉及的是单入口数组写法将多个依赖合并到一个chunk中
  //在这里vue作为第三方库会被合并
},
output: {
  path: path.resolve(__dirname,'./dist'),
  filename: '[name].js'
},
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',//指定已经存在的chunk这里指向的是vendor,
    公共部分模块都会合并到这个chunk名对应的文件,不指定默认生成name为commons的chunk。
    filename: '[name].js'//抽离出公共部分的文件名
  }),
]
}

module.exports = config;

2.详细分离业务模块 第三方依赖 公共模块 webpack运行文件

plugins: [//这一步把webpack运行文件抽离出来
    new webpack.optimize.CommonsChunkPlugin({//先抽离所用的公共模块
      name: 'vendor',
      filename: '[name].js'
    }),
    new webpack.optimize.CommonsChunkPlugin({//再指定vendor从中抽离webpack运行文件
      name: 'runtime',
      filename: '[name].js',
      chunks: ['vendor']
    }),
     new webpack.optimize.CommonsChunkPlugin({
    name: ['vendor','runtime'],
    filename: '[name].js',
    minChunks: Infinity//只有当入口文件(entry chunks) >= 3 才生效,
    //用来在第三方库中分离自定义的公共模块
    }),
    new webpack.optimize.CommonsChunkPlugin({
    name: 'common',
    filename: '[name].js',
    minChunks:2,//默认为2,意思是模块被多少个chunk引用才被抽离
    //由于common被 first 和second 引用 所以会被抽离
    chunks: ['first','second']//从first.js和second.js中抽取commons chunk
    }),
  ]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:


  • 本文相关:
  • 详解webpack的配置文件entry与output
  • js动态创建、删除表格示例代码
  • js实现侧边栏鼠标经过弹出框+缓冲效果
  • 微信小程序实现图片预览功能
  • 把字符串按照特定的字母顺序进行排序的js代码
  • javascript设置首页和收藏页面的小例子
  • js中的json对象的定义和取值实现代码
  • js数组array元素的添加和删除方法代码实例
  • js select下拉框(支持输入模糊查询)
  • javascript中date对象的getday方法使用指南
  • javascript按钮禁用和启用的效果实例代码
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved