浅谈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中数组的concat()方法使用介绍
Dec 18 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
详解javascript中的事件处理
Nov 06 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
switchery按钮的使用方法
Dec 18 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 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将csv文件导入到mysql数据库的方法
2014/12/24 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
Javascript的比较汇总
2016/07/25 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
python实现解数独程序代码
2017/04/12 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
python+opencv实现动态物体识别
2018/01/09 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
Python自动创建Excel并获取内容
2020/09/16 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
司仪主持词两篇
2014/03/22 职场文书
学校四群教育实施方案
2014/06/12 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
四风对照检查剖析材料
2014/10/07 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
歼十出击观后感
2015/06/11 职场文书
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers