

首页  思维导图  详情



Webpack原理与实践

2021-01-18 12:34:44   374  举报





AI智能生成

Webpack

webpack

模版推荐

作者其他创作

大纲/内容

核心作用

更高效地管理和维护前端项目中的每一个资源

模块化进程

Stage 1 - 文件划分方式

缺点

污染全局作用域

成员可以在模块外部被修改

无法管理模块之间的依赖关系

很难分辨每个成员所属的模块

Stage 2 – 命名空间方式

优点

避免命名冲突

Stage 3 – IIFE(立即执行函数)

优点

避免全局作用域污染

避免命名冲突

Stage 4 - IIFE 依赖参数

优点

避免全局作用域污染

避免命名冲突

有利于管理模块之间的依赖关系

Stage5 - 模块化规范

CommonJS(同步的方式加载模块)

AMD(异步的当时加载模块)

使用方式复杂

CMD(类似于 CommonJS)

Stage6 - 模块化的标准规范

Node.js 环境-CommonJS

浏览器环境 -ES Modules

问题

各个浏览器对ES Modules 不兼容

ES6编译为ES5

ES Modules的方式导致零散模块过多

将多个ES6模块文件打包成一个文件

HTML 和 CSS 等其他资源文件也需要被模块化

模块打包工具

Webpack

核心作用

模块打包工具(多个模块文件打包成一个文件)

通过 Loader 机制转换ES6代码

支持以模块化的方式载入任意类型的资源文件(转换为JS)

打包原理

打包后得文件-bundle.js 

是一个立即执行函数

优点

避免全局作用域污染

避免命名冲突

__webpack_modules__(数组)

存储多个参数列表相同的函数

一个函数就是一个JS模块

__webpack_module cache_(对象)

用于存放或者缓存加载过的模块

__webpack require_(函数)

加载指定的JS模块

执行__webpack require_(函数)

Loader

出现的原因

Webpack 内部默认只能够处理 JS 模块代码,加载其他类型的模块就需要配置不同的 Loader

配置了Loader了，源代码会先经过Loader(处理为JS模块代码)，然后再交给webpack进行打包

配置方式

加载CSS模块

css-loader

将CSS代码转换为JS模块

style-loader

把 css-loader 转换后的结果通过 style 标签追加到页面上

资源文件加载方式比较

HTML

通过Script加载JS模块

通过Link 加载CSS模块

图片文件模块

image标签加载

css加载

js动态加载

字体文件模块

css加载

js动态加载

........

webpack

在JS 代码中通过 import 的方式加载所有类型的资源文件

开发一个 Loader

开发: 声明并导出一个有返回值的函数(eg：my-loader.js)

source参数

原始的资源文件内容

return 处理后的结果  

返回的结果必须是一段标准的 JS 代码字符串

使用

Plugin

出现的目的-作用

Loader 负责完成项目中各种各样资源模块的加载，从而实现整体项目的模块化

Plugin 则是用来解决项目中除了资源模块打包以外的其他自动化工作，增强了 Webpack 在项目自动化构建方面的能力

常用插件及配置方式

实现自动在打包之前清除 dist 目录（上次的打包结果）

clean-webpack-plugin

自动生成应用所需要的 HTML 文件

html-webpack-plugin

根据不同环境为代码注入类似 API 地址这种可能变化的部分

拷贝不需要参与打包的资源文件到输出目录

copy-webpack-plugin

压缩 Webpack 打包完成后输出的文件

将JS模块中的CSS代码提取出来生成单独的CSS文件

自动发布打包结果到服务器实现自动部署

开发一个Plugin

原理:钩子机制

含义:Webpack 几乎在每一个环节都埋下了一个钩子,在不同的钩子上挂载我们的插件，就可以扩展webpack的能力

大致有哪些环节

构建前

读取webpack的某一个配置时

............

构建中

............

构建后

构建失败时

构建成功时

............

官方预先定义好的钩子

Compiler Hooks

Compilation Hooks

JavascriptParser Hooks

开发:声明并导出一个有  apply方法的类

使用

运行机制与核心工作原理

检查CLI命令是否符合规范，不规范则报错

createCompiler()

resolveConfig()

如果传入了配置文件的路径，则使用此配置文件

如果没有传入文件路径，则使用默认的配置文件

如果传入了 merge指令，则将对应的配置文件进行合并

applyOptions()

读取entry

读取output

读取target

读取devtool

读取mode

....

applyCLIPlugin()

数组(多模块打包)-为每一个模块加载插件

对象(单模块打包)-为该模块添加插件

调用 webpack模块-生成 compiler对象

webpack()

判断 options参数是数组还是对象

数组:多路打包-createMultiCompiler()

对象:单线打包-createCompiler()

注册已配置的插件

触发特定的hook

Compiler()

run()

this.compile(onCompiled);

webpack-dev-server

作用

启动本地服务器

自动编译

自动刷新

原理

内部会启动一个 HTTP Server，为打包的结果提供静态文件服务

自动使用 Webpack 打包

监听源代码的变化，一旦文件发生变化，立即重新打包

配置

静态资源访问:contentBase

接口代理:proxy

指定启动端口:port

.......

Source Map

作用

构成

version

指定所使用的 Source Map 标准版本

sources

转换前的源文件名称， 因为有可能出现多个文件打包转换为一个文件的情况， 所以这里是一个数组

names

源代码中使用的一些成员名称， 我们都知道一般压缩代码时会将我们开发阶段编写的有意义的变量名替换为一些简短的字符， 这个属性中记录的就是原始的名称

mappings

是一个叫作 base64-VLQ 编码的字符串，里面记录的信息就是转换后代码中的字符与转换前代码中的字符之间的映射关系

file

转换后的文件名

webpack的devtool配置

开发环境用什么

eval-cheap-module-source-map

原因

用框架的情况下，Loader 转换后差别都很大，使用此模式可以调试 Loader 转换前的源代码

定位到行到位置足够了

webpack-dev-server 都是在监视模式下重新打包，它重新打包的速度非常快

生产环境用什么

（省略 devtool 选项） - 不生成 source map

各种模式的区别是啥???

模块热替换-HMR(hot module replacement)

其他几种概念

live reloading

监听文件的改动，触发整个应用重新加载

hot reloading-HMR的简称

作用

原理???

优化

打包结果优化

Tree-shaking(生产环境自动开启)

压缩代码

删除无用代码

sideEffects(生产环境自动开启)

Tree-shaking 只能移除没有用到的代码成员， 而想要完整移除没有用到的模块，那就需要开启 sideEffects 特性了

Code Splitting

实现方式

多入口打包(多页面应用)

配置多个entry

配置多个html模板

提取公共模块

按需加载

魔法注释

插件

mini-css-extract-plugin

将 CSS 代码从JS打包结果中提取为CSS文件

optimize-css-assets-webpack-plugi

压缩CSS文件里面的代码

构建速度优化

编写不同环境的配置文件

webpack.common.js

公共配置

webpack.dev.js

开发模式配置

webpack.prod.js

生产模式配置

 Collect

Get Started

机器学习算法原理与编程实践

 Collect

Get Started

webpack基础

 Collect

Get Started

内存取证原理与实践

 Collect

Get Started

原理





0 条评论

下一页