浅谈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 相关文章推荐
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
js的三种继承方式详解
Jan 21 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
react配置antd按需加载的使用
Feb 11 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
支付宝小程序实现省市区三级联动
Jun 21 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
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
详解Python中的文本处理
2015/04/11 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
python中字符串内置函数的用法总结
2018/09/13 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
大二自我鉴定
2014/01/31 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
员工试用期自我评价
2014/09/18 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
八年级作文之友情
2019/11/25 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
修改并编译golang源码的操作步骤
2021/07/25 Golang
mysql数据库隔离级别详解
2022/06/16 MySQL