浅谈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 相关文章推荐
用于table内容排序
Jul 21 Javascript
JavaScript 闭包在封装函数时的简单分析
Nov 28 Javascript
取选中的radio的值
Jan 11 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 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
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
Python的Django框架下管理站点的基本方法
2015/07/17 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
Python实现简单字典树的方法
2016/04/29 Python
Python+Wordpress制作小说站
2017/04/14 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
Python里面search()和match()的区别
2016/09/21 面试题
计划生育汇报材料
2014/12/26 职场文书
清洁工岗位职责
2015/02/13 职场文书
道歉情书大全
2015/05/12 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang
Spring 使用注解开发
2022/05/20 Java/Android