模块打包工具

由来
- ES Modules存在环境兼容问题
- 模块文件过多，网络请求频繁
- 所有的前端资源都需要模块化
- 美好设想
  - 编译
    - 开发阶段尽情使用新特性
    - 生产阶段最大程度兼容所有浏览器
  - 打包
    - 将散落的文件打包为一个文件
    - 解决模块过多频繁发出资源请求的问题
    - 支持不同种类的前端资源类型
- 总结
  - 新特性代码编译
    - 通过构建系统和一些编译工具来实现
  - 模块化JS打包
    - 通过构建系统和一些编译工具来实现
  - 支持不同类型的资源模块
    - 需要前端模块打包工具
概要
- Webpack
  - 核心特性满足了以上所述需求
  - 一款模块打包器(Module bundler)
  - 对于有环境兼容性的特性，可以使用模块加载器(Loader) 对其进行编译转换
  - 代码拆分(Code Splitting)
    - 能够将应用中所有的代码都按照我们的需要去打包
      - 不用担心把所有的文件打包到一起产生笨重大文件的问题。
    - 我们可以把应用加载过程当中初次运行的时候所必须的那些模块打包到一起。对于其他的模块可以单独存放，等实际需要时再异步加载该模块。这种加载称为增量加载或渐进式加载。
  - 对于前端模块类型的问题，Webpack支持我们在JS中以模块化的方式去载入任意类型的资源文件，即资源模块(Asset Module)
- Rollup
- Parcel
作用
- 打包工具解决的是前端整体的模块化，并不单指JS模块化
- 可以让我们在开发阶段更好的享受模块化所带来的优势，同时呢不必担心模块化给生产环境所产生的一些影响。

Webpack

- 快速上手

- Webpack作为目前最主流的前端模块打包器，提供了一整套的前端项目模块化方案，而非仅仅局限于只对JS的模块化。通过Webpack提供的前端模块化方案，我们可以轻松的对我们前端项目中涉及到的所有资源进行模块化。
- Webpack想法先进，早期使用过程比较繁琐，官方文档也比较晦涩难懂，所以最开始的时候，显得对我们开发者不是十分友好。但是随着版本迭代，官方文档也在不断更新，目前Webpack已经非常受欢迎了，基本上可以说是覆盖了绝大多数现代web项目应用开发过程。
- 案例

	- src

		- heading.js

			- export default () ⥤ {
const element = document.createElement('h2')

element.textContent='hello world'
element.addEventListener('click', () ⥤ {
   alert('Hello webpack')
})

return element

}

		- index.js

			- import createHeading from './heading.js'

const heading= createHeading()

document.body.append(heading)

	- index.html

		- <!DOCTYPE html>

Webpack - 快速上手

	- 安装serve

		- yarn global add serve

	- 运行

		- serve  .

	- 引入Webpack处理JS模块

		- 由于Webpack是npm的一个工具模块，所以先初始化一个package.json文件

			- yarn init --yes

		- 安装Webpack及其cli插件

			- yarn add webpack webpack-cli --dev
			- yarn webpack --version

				- Ok~

	- 执行打包操作

		- yarn webpack

			- OK~

		- 将webpack命令包装在package.json中的scripts属性中

			- "scripts": {
"build": "webpack"

} - 运行: yarn build

				- OK~

- 配置文件

- Webpack4以后的版本支持零配置直接启动打包

	- 整个打包过程会将src/index.js作为打包入口，并在dist目录下生成main.js文件

- 添加配置文件webpack.config.js

	- 此文件是运行在Node环境中的js文件，所以需要以CommonJS方式来编写代码
	- 内容

		- const path = require ('path')

module.exports = { // 指定webpack打包的入口路径，指定相对路径时，'./'不能省略 entry: './src/main.js', // 设置输出文件的位置 output: { // 设置输出文件名称 filename: 'bundle.js', // 指定输出文件所在目录，不可使用相对路径 path: path.join(__dirname,'output') } } - 打包: yarn build

			- OK~

- 工作模式

- webpack4新增了一个工作模式的用法

	- 此用法大大简化了webpack配置的复杂程度

		- 可以理解为针对不同环境预设的几组配置

- yarn build

	- 警告: 大概意思是未指定mode属性，将以生产环境方式进行打包

		- 打包代码进行过优化，很难阅读

- yarn webpack --mode development

	- 无警告

		- 打包代码可读性强

- mode

	- development

		- 此工作模式下webpack会优化打包速度
		- 增加调试过程中需要的辅助到我们打包代码中

	- production

		- 此工作模式会优化代码

	- none

		- webpack运行最原始状态的打包，不会去做任何额外的处理

- 除了在运行参数中设置工作模式也可以在配置文件webpack.config.js中指定

	- const path = require ('path')

module.exports = { mode: 'development', // 指定webpack打包的入口路径，指定相对路径时，'./'不能省略 entry: './src/main.js', // 设置输出文件的位置 output: { // 设置输出文件名称 filename: 'bundle.js', // 指定输出文件所在目录，不可使用相对路径 path: path.join(__dirname,'output') } } - 运行: yarn build

- 打包结果运行原理

- 为了可以更好的理解打包过后的代码

	- 将mode设置为none

		- const path = require ('path')

module.exports = { mode: 'none', // 指定webpack打包的入口路径，指定相对路径时，'./'不能省略 entry: './src/main.js', // 设置输出文件的位置 output: { // 设置输出文件名称 filename: 'bundle.js', // 指定输出文件所在目录，不可使用相对路径 path: path.join(__dirname,'output') } }

- 打包: yarn webpack

	- dist目录下成功生成了bundle.js文件
	- 分析bundle.js文件

		- Ctrl+K,Ctrl+0

			- 折叠所有代码

		- 整体生成代码是一个立即执行函数即IIFE

			- 该函数是webpack工作入口

				- 形参参数为modules
				- 实参为一个数组，数组中每一个元素都是参数列表相同的函数

					- 每个函数对应的就是我们源代码中的模块
					- 也就是说我们每个模块都会被包裹到这样一个函数当中，从而去实现模块的私有作用域

		- 展开webpack工作入口函数，分析函数体内部

			- 1，定义1个对象，用于缓存已经加载的模块对象
			- 2，定义了一个require函数，用于加载模块
			- 3，在require函数上挂载了一些属性或工具函数

				- m属性

					- 用于缓存参数modules

				- c属性

					- 用于缓存已经加载过的模块s

				- d函数

					- 用于给指定对象定义getter函数

				- r函数

					- 给指定对象定义__esModule标志

				- t函数

					- 创建一个伪命名空间对象

				- n函数

					- 用于处理兼容性

				- o函数

					- 用于判断指定对象是否拥有给定属性

				- p属性

					- 公共路径前缀

			- 函数最后调用了自定义的require函数，传入了一个0开始加载我们的模块

- 总结

	- webpack打包过后的代码并不会特别的复杂。
	- 只是帮我们把所有的模块放到同一个文件当中
	- 除了放到同一个文件当中，webpack还提供了一些基础代码，让我们的这些模块与模块之间相互依赖关系还可以保持原有的那个状态。

新进webpack打包系列一

模块打包工具

Webpack

- 快速上手

- 配置文件

- 工作模式

- 打包结果运行原理

常见问题FAQ

掘金(时解之515) SVIP

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

模块打包工具

Webpack

- 快速上手

- 配置文件

- 工作模式

- 打包结果运行原理

常见问题FAQ

掘金(时解之515) SVIP

相关推荐

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

请选择支付方式