浅谈webpack 四个核心概念之Entry


Posted in Javascript onJune 12, 2019

因为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
    }),
  ]

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

Javascript 相关文章推荐
用javascript动态调整iframe高度的方法
Mar 06 Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
解决js正则匹配换行问题实现代码
Dec 10 Javascript
js修改地址栏URL参数解决url参数问题
Dec 15 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 #Javascript
深入学习JavaScript 高阶函数
Jun 11 #Javascript
javascript防抖函数debounce详解
Jun 11 #Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 #Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 #Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 #Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 #Javascript
You might like
搜索引擎技术核心揭密
2006/10/09 PHP
PHP超级全局变量数组小结
2012/10/04 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
Python解析树及树的遍历
2016/02/03 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
python的sorted用法详解
2019/06/25 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
PyTorch中permute的用法详解
2019/12/30 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
生物学学生自我评价
2014/01/17 职场文书
小学开学寄语
2014/01/19 职场文书
职业生涯规划书范文
2014/03/10 职场文书
婚礼答谢礼品
2015/01/20 职场文书
办公室规章制度范本
2015/08/04 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书