【无标题】

---

前言

webpack 是 JavaScript 应用程序的模块打包器,可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和 plugins （插件）对资源进行处理，打包成符合生产环境部署的前端资源。所有的资源都是通过 JavaScript 渲染出来的。

• 基于模块化的打包（构建）工具, 它把一切都视作模块
• 如果一个页面大部分是script标签构成，80%以上是 webpack 打包。

---

一、webpack 打包简介

示例
展开后：

1.多个js打包

如果模块比较多，就会将模块打包成JS文件, 然后定义一个全局变量 window[“webpackJsonp”] =[ ] ，它的作用是存储需要动态导入的模块，然后重写 window[“webpackJsonp”] 数组的 push( ) 方法为 webpackJsonpCallback( ) ,也就是说 window[“webpackJsonp”].push( ) 其实执行的是webpackJsonpCallback( ) , window[“webpackJsonp”].push( ) 接收三个参数,第一个参数是模块的ID,第二个参数是 一个数组或者对象,里面定义大量的函数,第三个参数是要调用的函数(可选)

2.webpack 数组形式

• 给需要处理业务的模块进行打包，通过下标取值。
  代码如下（示例）：

!function(e) {
	var t = {};
	// 加载器 所有的模块都是从这个函数加载 执行
	function n(r) {
		if (t[r])
			return t[r].exports;
		var o = t[r] = {
			i: r,
			l: !1,
			exports: {}
		};
		return e[r].call(o.exports, o, o.exports, n),
			o.l = !0,
			o.exports
	}
	n(0)
}(
	[
		function () {console.log('123456')},
		function () {console.log('模块2')},
	]
)

2.webpack 对象形式

• 给需要处理业务的模块进行打包，通过 key 取值
  代码如下（示例）：

!function(e) {
	var t = {};
	// 所有的模块 都是从这个加载器 执行的 分发器
	function n(r) {
		if (t[r])
			return t[r].exports;
		var o = t[r] = {
			i: r,
			l: !1,
			exports: {}
		};
		return e[r].call(o.exports, o, o.exports, n),
		o.l = !0,
		o.exports
	}
	n('test1') // 对象 根据KEY 找模块
}(
	{
		0: function () {console.log('我是模块1 负责加密')},
		'test1': function () {console.log('我是模块2 负责解密')},
		2: function () {console.log('我是模块3 负责爬数据')}
	}
);

---

总结

• 找到这个加载器找到调用模块
• 构造一个自执行方法
• 导出加密方法
• 编写自定义方法
• 按照流程加密